网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jQuery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。先看效果图：
代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：
? ?
? ? <script src="jquery-1.7.1.min.js">
? ?
? ? <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
? ? ? ? ? ? //位数不足要补
? ? ? ? ? ? if(dom.find("i").length < len){
? ? ? ? ? ? ? ? dom.append("");
? ? ? ? ? ? }
? ? ? ? ? ? var obj = dom.find("i").eq(i);
? ? ? ? ? ? var y = -40 * parseInt(n.charAt(i), 10);
?
? ? ? ? ? ? //加分隔符
? ? ? ? ? ? if(i < len - 1 && (len - i - 1) % 3 == 0)
? ? ? ? ? ? ? ? $("").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);
? ? });
? ?
? ?
代码与资源放在附件里了。
------------------------------------------分割线------------------------------------------
具体下载目录在 /2015年资料/8月/20日/jQuery实现数字滚动效果/
------------------------------------------分割线------------------------------------------