数字滚动效果 – 有爱前端

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字滚动效果</title> <style type="text/css"> body{ margin: 0; padding: 0; font-size: 14px; background-color: #F6F6F6; font-weight: normal; font-family: "Microsoft YaHei"; color: #333333; } .runNum{ margin: 0 auto; padding: 0; overflow: hidden; height: 50px; line-height: 50px; border-top: #CCCCCC solid 1px; border-bottom: #CCCCCC solid 1px; text-align: center; font-weight: bold; position: relative; } .runNum>li{ list-style: none; width: 40px; float: left; position: absolute; } </style> </head> <body> <h2 style="text-align: center;">数字滚动效果</h2> <div style="margin: 50px auto;width: 320px;font-size:44px;"> <ul class="runNum" id="test"></ul> </div> <script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> (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); </script> <script type="text/javascript"> $("#test").runNum(52013141); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 数字滚动效果