zoukankan html css js c++ java

jQuery数字滚动（模拟网站人气、访问量递增）原创

插件描述：实现数字上下滚动，模拟网站人气、访问量递增的动画效果，兼容性如下：

使用方法

    
$(el).runNum(val,params);

参数详解

val：数值型(默认70225800)；

parameters：对象({addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)})

可直接查看源文件，样式及位置可自己修改CSS即可！

源码如下：

 (function ($) {
        /*jQuery对象添加  runNum  方法*/
        $.fn.extend({
            /*
                *    滚动数字
                *    @ val 值，    params 参数对象
                *    params{addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)}
            */
            runNum:function (val,params) {
                /*初始化动画参数*/
                var valString = val || '70225800'
                var par= params || {};
                var runNumJson={
                    el:$(this),
                    value:valString,
                    valueStr:valString.toString(10),
                    par.width || 40,
                    height:par.height || 50,
                    addMin:par.addMin || 10000,
                    addMax:par.addMax || 99999,
                    interval:par.interval || 3000,
                    speed:par.speed || 1000,
                    par.width || 40,
                    length:valString.toString(10).length
                };
                $._runNum._list(runNumJson.el,runNumJson);
                $._runNum._interval(runNumJson.el.children("li"),runNumJson);
            }
        });
        /*jQuery对象添加  _runNum  属性*/
        $._runNum={
            /*初始化数字列表*/
            _list:function (el,json) {
                var str='';
                for(var i=0; i<json.length;i++){
                    var w=json.width*i;
                    var t=json.height*parseInt(json.valueStr[i]);
                    var h=json.height*10;
                    str +='<li style="'+json.width+'px;left:'+w+'px;top: '+-t+'px;height:'+h+'px;">';
                    for(var j=0;j<10;j++){
                        str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+j+'</div>';
                    }
                    str+='</li>';
                }
                el.html(str);
            },
            /*生成随即数*/
            _random:function (json) {
                var Range = json.addMax - json.addMin;
                var Rand = Math.random();
                var num=json.addMin + Math.round(Rand * Range);
                return num;
            },
            /*执行动画效果*/
            _animate:function (el,value,json) {
                for(var x=0;x<json.length;x++){
                    var topPx=value[x]*json.height;
                    el.eq(x).animate({top:-topPx+'px'},json.speed);
                }
            },
            /*定期刷新动画列表*/
            _interval:function (el,json) {
                var val=json.value;
                setInterval(function () {
                    val+=$._runNum._random(json);
                    $._runNum._animate(el,val.toString(10),json);
                },json.interval);
            }
        }
    })(jQuery);

实例如下：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>数字滚动效果 jQuery插件</title>
  6     <style type="text/css">
  7         body{
  8             margin: 0;
  9             padding: 0;
 10             font-size: 14px;
 11             background-color: #F6F6F6;
 12             font-weight: normal;
 13             font-family: "Microsoft YaHei";
 14             color: #333333;
 15         }
 16         .runNum{
 17             margin: 0 auto;
 18             padding: 0;
 19             overflow: hidden;
 20             height: 50px;
 21             line-height: 50px;
 22             border-top: #CCCCCC solid 1px;
 23             border-bottom: #CCCCCC solid 1px;
 24             text-align: center;
 25             font-weight: bold;
 26             position: relative;
 27         }
 28         .runNum>li{
 29             list-style: none;
 30              40px;
 31             float: left;
 32             position: absolute;
 33         }
 34     </style>
 35 </head>
 36 <body>
 37 <h2 style="text-align: center;">数字滚动效果 jQuery插件</h2>
 38 <div style="margin: 50px auto; 320px;font-size:44px;">
 39     <ul class="runNum" id="test"></ul>
 40 </div>
 41 <h4 style="text-align: center;">&copy;2017 helang版权所有</h4>
 42 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
 43 <script type="text/javascript">
 44     (function ($) {
 45         /*jQuery对象添加  runNum  方法*/
 46         $.fn.extend({
 47             /*
 48                 *    滚动数字
 49                 *    @ val 值，    params 参数对象
 50                 *    params{addMin(随机最小值),addMax(随机最大值),interval(动画间隔),speed(动画滚动速度),width(列宽),height(行高)}
 51             */
 52             runNum:function (val,params) {
 53                 /*初始化动画参数*/
 54                 var valString = val || '70225800'
 55                 var par= params || {};
 56                 var runNumJson={
 57                     el:$(this),
 58                     value:valString,
 59                     valueStr:valString.toString(10),
 60                     par.width || 40,
 61                     height:par.height || 50,
 62                     addMin:par.addMin || 10000,
 63                     addMax:par.addMax || 99999,
 64                     interval:par.interval || 3000,
 65                     speed:par.speed || 1000,
 66                     par.width || 40,
 67                     length:valString.toString(10).length
 68                 };
 69                 $._runNum._list(runNumJson.el,runNumJson);
 70                 $._runNum._interval(runNumJson.el.children("li"),runNumJson);
 71             }
 72         });
 73         /*jQuery对象添加  _runNum  属性*/
 74         $._runNum={
 75             /*初始化数字列表*/
 76             _list:function (el,json) {
 77                 var str='';
 78                 for(var i=0; i<json.length;i++){
 79                     var w=json.width*i;
 80                     var t=json.height*parseInt(json.valueStr[i]);
 81                     var h=json.height*10;
 82                     str +='<li style="'+json.width+'px;left:'+w+'px;top: '+-t+'px;height:'+h+'px;">';
 83                     for(var j=0;j<10;j++){
 84                         str+='<div style="height:'+json.height+'px;line-height:'+json.height+'px;">'+j+'</div>';
 85                     }
 86                     str+='</li>';
 87                 }
 88                 el.html(str);
 89             },
 90             /*生成随即数*/
 91             _random:function (json) {
 92                 var Range = json.addMax - json.addMin;
 93                 var Rand = Math.random();
 94                 var num=json.addMin + Math.round(Rand * Range);
 95                 return num;
 96             },
 97             /*执行动画效果*/
 98             _animate:function (el,value,json) {
 99                 for(var x=0;x<json.length;x++){
100                     var topPx=value[x]*json.height;
101                     el.eq(x).animate({top:-topPx+'px'},json.speed);
102                 }
103             },
104             /*定期刷新动画列表*/
105             _interval:function (el,json) {
106                 var val=json.value;
107                 setInterval(function () {
108                     val+=$._runNum._random(json);
109                     $._runNum._animate(el,val.toString(10),json);
110                 },json.interval);
111             }
112         }
113     })(jQuery);
114 </script>
115 <script type="text/javascript">
116     $("#test").runNum(52013141);
117 </script>
118 </body>
119 </html>

文章来源：

http://www.jq22.com/jquery-info16526

查看全文

相关阅读:
解决部分小程序无法获取UnionId的问题
 你也可以写个聊天程序
 JavaScript 数据结构与算法之美
 CSS content应用
 JS中判断null、undefined与NaN的方法
 IT资料常用网址汇总
 史上最全的正则表达式-匹配中英文、字母和数字
 百万数据修改索引，百万数据修改主键
 SQL Server 2005 实现数据库同步备份过程--结果---分析
 数据库性能优化三：程序操作优化

原文地址：https://www.cnblogs.com/joyco773/p/9125662.html