jQuery數字滾動（模擬網站人氣、訪問量遞增）原創
阿新 • • 發佈：2018-06-02
val RF als bottom 定期 lan left position 分享
插件描述：實現數字上下滾動，模擬網站人氣、訪問量遞增的動畫效果，兼容性如下：
使用方法
$(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‘ varpar= 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數字滾動（模擬網站人氣、訪問量遞增）原創