一个简单的数字滚动插件
为了让页面的表格数据呈现出数字滚动的效果，找了个插件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
