jQuery达成数字滚动效果
发布时间：2021-11-19 12:06:10 所属栏目：PHP教程 来源：互联网
导读：代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码： !DOCTYPE html html lang=zh-cn head meta charset=utf-8 titlejQuery实现数字滚动效果演示www.linuxidc.com/title script src=jquery-1.7.1.min.js/script style .digits{ display:inli
|
代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码： <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>jQuery实现数字滚动效果演示www.linuxidc.com</title> <script src="jquery-1.7.1.min.js"></script> <style> .digits{ display:inline-block; height:30px; margin-right:50px; } .digits i{ background:url(numbers.png) no-repeat; display:inline-block; float:left; height:30px; width:18px; } .digits b{ background:url(numbers.png) no-repeat 0 -398px; display:inline-block; float:left; height:30px; width:10px; } </style> <script> function setNumber(dom, number){ var n = String(number),len = n.length; //如果新的数字短于当前的，要移除多余的i if(dom.find("i").length > len){ dom.find("i:gt(" + (len - 1) + ")").remove(); } //移除千分位分隔符 dom.find("b").remove(); //开始填充每一位 for(var i=0;i<len;++i){ //位数不足要补 if(dom.find("i").length < len){ dom.append("<i></i>"); } var obj = dom.find("i").eq(i); var y = -40 * parseInt(n.charAt(i), 10); //加分隔符 if(i < len - 1 && (len - i - 1) % 3 == 0) $("<b></b>").insertAfter(obj); //利用动画变换数字 obj.animate({ backgroundPositionY:y+"px" }, 350); } }; $(function(){ //测试，每秒更新随机数 window.setInterval(function(){ setNumber($("#a"), Math.floor(Math.random() * 1000000)); setNumber($("#b"), Math.floor(Math.random() * 1000000)); }, 1000); }); </script> </head> <body> <div id="a" class="digits"></div> <div id="b" class="digits"></div> </body> </html> 代码与资源放在附件里了。  （编辑：云计算网_泰州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330476号