网页上如果有数字需要经常变动，又想让它比较明显，肯定是加个动画比较显眼，利用jquery的animate可以很容易的实现，不需要css3，因此可以兼容低版本的ie浏览器。
代码比较简单，没有整理成插件形式，暂时全堆在html里了。直接上代码：
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>演示</title> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>代码与资源放在附件里了。
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫(xiě)下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃，即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得
100積分直接送
付費(fèi)專(zhuān)欄免費(fèi)學(xué)
大額優(yōu)惠券免費(fèi)領(lǐng)