网页上如果有数字需要经常变动,又想让它比较明显,肯定是加个动画比较显眼,利用jquery的animate可以很容易的实现,不需要css3,因此可以兼容低版本的ie浏览器。
代码比较简单,没有整理成插件形式,暂时全堆在html里了。直接上代码:html>
演示 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"); } var obj = dom.find("i").eq(i); var y = -40 * parseInt(n.charAt(i), 10); //加分隔符 if(i ").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); });代码与资源放在附件里了。