一个简单的数字滚动插件

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

 

posted @ 2018-01-12 10:00  呜呼~厉害了  阅读(3298)  评论(0编辑  收藏