為了讓頁面的表格數據呈現出數字滾動的效果，找了個插件digitalscrol。下面我做個做了個簡單demo用作分享。
先看下效果圖：
好了二話不說上代碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/animateBackground-plugin.js"></script> <title>數字滾動</title> <style type="text/css"> .t_num_con { display: inline-table;position:relative; margin:0 0 0 0; padding:0px;} .t_num{ position: static; display: block; padding:0px;margin:0px;} .t_num i {background-color:#337ab7!important;} .t_num { font-family: "Arial", Gadget, sans-serif; color:#f60; font-size:32px; text-align: center; float: left;left:60px; top:10px; z-index:2;} .t_num i{width:28px;height:38px; display:inline-block; background: url(../img/number5.png) no-repeat #c13333; text-indent:-999em;float: left; margin:0 2px 0 0; border-radius: 2px; color:#f60; } </style> </head> <body> <div id="total"> 下載量：<span id="sss" class="t_num"></span>次 </div> <script> function show_num(){ var n = parseInt(Math.random()*9000000 + 100000); //alert(n); var sss ='sss'; var it = $("#"+sss+" i"); var len = String(n).length; for(var i=0;i<len;i++){ if(it.length<=i){ $("#sss").append("<i id='span_li_0"+i+"' style='background-Position: 0 -342px;'></i>"); } var num=String(n).charAt(i); //alert(num); //var y; //y軸位置 0 1 -38 2 var y = num==0?-342:-parseInt(num-1)*38; $("#span_li_0"+i).animate({backgroundPosition :'0 '+String(y)+'px'},'slow','swing',function(){}); } } $(function(){ //show_num('5680億萬百'); setInterval(function(){show_num()},1000); }); </script> </body> </html>
這里的number5背景圖用PS打開是這個樣子的
數字字體顏色為白色，背景為透明。demo的大體思路是，先隨機一個數字（10萬-910萬之間），然后根據隨機數字的長度確定需要幾個格子進行數據展示，每個格子再根據數字從number5圖片上截取需要的對應數字。如果需求其他樣式可以自行修改css或者更換數字圖片。
具體demo地址：
鏈接：https://pan.baidu.com/s/1pMtZkr5
密碼：ca6d