插件描述：实现数字上下滚动，模拟网站人气、访问量递增的动画效果，兼容性如下：
使用方法
???$(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), ???????????????????width:par.width || 40, ???????????????????height:par.height || 50, ???????????????????addMin:par.addMin || 10000, ???????????????????addMax:par.addMax || 99999, ???????????????????interval:par.interval || 3000, ???????????????????speed:par.speed || 1000, ???????????????????width: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="width:‘+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 ????????????width: 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;width: 320px;font-size:44px;"> 39 ????<ul class="runNum" id="test"></ul> 40 </div> 41 <h4 style="text-align: center;">©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 ????????????????????width: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 ????????????????????width: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="width:‘+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
jQuery数字滚动（模拟网站人气、访问量递增）原创
原文地址：https://www.cnblogs.com/joyco773/p/9125662.html