这是关于数字加载的一个动画，从0开始变化到设置的数字，依赖于jquery,效果如下所示
当然，数字要显示的位数是可以设置的，默认是全部位数的数字，设置显示位数可以直接传递参数，例如：
html文件为：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数字</title> <link rel="stylesheet" type="text/css" href="css/main.css" /> <script type="text/javascript" src="js/lib/sea.js"></script> </head> <body> <h1 class="num" data-num="83692">0</h1> <h2 class="num1" data-num="88692">0</h2> <script type="text/javascript" src="js/entry.js"></script> </body> </html>
entry.js为主要js，是这个动画的方法，内容为：
function num_effect(dom,conf,fn){ if(typeof conf === 'function'){ fn = conf; conf = {}; } this.conf = $.extend({ digits: '', //显示的位数 time: 0.05 //动画时间，单位为s }, conf || {}); this.fn = fn; this.dom = $(dom); this.val = this.dom.data("num"); this.handle(); } num_effect.prototype.handle = function(){ var self = this; var str = self.val.toString(); var digits = parseInt(self.conf.digits); if(isNaN(digits)){ digits = str.length; } var arrs = str.substr(0,digits).split(""); var j = 0, max = 0; var setFun = setInterval(function(){ if(max >= digits){ clearInterval(setFun); self.fn();//返回函数 } (function(j){//更改值 var tmp = []; for(var i=0; i<arrs.length; i++){ var now = parseInt(arrs[i]); if(now > j){ tmp[i] = j; }else{ if(now === j){ max ++; } tmp[i] = now; } } self.dom.text(tmp.join("")); })(j); j++; },self.conf.time*1000); setFun; } $.fn.extend({ numEffect: function(conf,fn){ this.each(function(i,dom){ new num_effect(dom,conf,fn); }); } });
那么调用这个方法实现动画只需要调用函数numEffect即可，如下
$(".num").numEffect();
如果加载完成后需要再执行一些js，那么只需如下这样即可：
$(".num,.num1").numEffect(function(){
console.log("加载完成");
});
查看entry.js可知，参数digits是控制显示的位数的，从左到右开始，time是数字变化的时间，单位为s，使用方法如下
$(".num1").numEffect({'digits': 2, 'time': 0.1});
目前，该函数只支持了这两个参数的设置，以及执行后的函数设置，没有实现按需执行动画，以后有需要了再说吧，暂时先这么做个笔记吧。