网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jquery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。先看效果图：


代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：

<!DOCTYPEhtml><htmllang="zh-cn"><head><metacharset="utf-8"><title>演示</title><scriptsrc="jquery-1.7.1.min.js"></script><style>.digits{display:inline-block;height:30px;margin-right:50px;}.digitsi{background:url(numbers.png)no-repeat;display:inline-block;float:left;height:30px;width:18px;}.digitsb{background:url(numbers.png)no-repeat0-398px;display:inline-block;float:left;height:30px;width:10px;}</style><script>functionsetNumber(dom,number){varn=String(number),len=n.length;//如果新的数字短于当前的，要移除多余的iif(dom.find("i").length>len){dom.find("i:gt("+(len-1)+")").remove();}//移除千分位分隔符dom.find("b").remove();//开始填充每一位for(vari=0;i<len;++i){//位数不足要补if(dom.find("i").length<len){dom.append("<i></i>");}varobj=dom.find("i").eq(i);vary=-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><divid="a"class="digits"></div><divid="b"class="digits"></div></body></html>



代码与资源放在附件里了。




附件：http://down.51cto.com/data/2365488