jQuery实现数字滚动效果

网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jQuery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。先看效果图：演示网址：http://www.linuxidc.com/files/2015/08/jquery/index.html代码比较简单，没有整理成插件形式，暂时全堆在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>代码与资源放在附件里了。------------------------------------------分割线------------------------------------------免费下载地址在 http://linux.linuxidc.com/用户名与密码都是www.linuxidc.com具体下载目录在 /2015年资料/8月/20日/jQuery实现数字滚动效果/下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm------------------------------------------分割线------------------------------------------本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-08/122001.htm