/** * 数字滚动插件 v1.0 */ (function($) { $.fn.numberAnimate = function(setting) { var defaults = { speed : 3000,//动画速度 num : 0, //初始化值 iniAnimate : true, //是否要初始化动画效果 symbol : '',//默认的分割符号,千,万,千万 dot : 0 //保留几位小数点 } //如果setting为空,就取default的值 var setting = $.extend(defaults, setting); //如果对象有多个,提示出错 if($(this).length > 1){ console.error("just only one obj!"); return; } //如果未设置初始化值。提示出错 if(setting.num == ''){ setting.num=0; console.error("must set a num!"); return; } var nHtml = '
\ 0\ 1\ 2\ 3\ 4\ 5\ 6\ 7\ 8\ 9\ .\
'; //数字处理 var numToArr = function(num){ num = parseFloat(num).toFixed(setting.dot); if(typeof(num) == 'number'){ var arrStr = num.toString().split(""); }else{ var arrStr = num.split(""); } //console.log(arrStr); return arrStr; } //设置DOM symbol:分割符号 var setNumDom = function(arrStr){ var shtml = '
'; for(var i=0,len=arrStr.length; i'+nHtml.replace("{{num}}",arrStr[i]); }else{ shtml += nHtml.replace("{{num}}",arrStr[i]); } } shtml += '
'; return shtml; } //执行动画 var runAnimate = function($parent){ $parent.find(".mt-number-animate-dom").each(function() { var num = $(this).attr("data-num"); num = (num=="."?10:num); var spanHei = $(this).height()/11; //11为元素个数 var thisTop = -num*spanHei+"px"; if(thisTop != $(this).css("top")){ if(setting.iniAnimate){ //HTML5不支持 if(!window.applicationCache){ $(this).animate({ top : thisTop }, setting.speed); }else{ $(this).css({ 'transform':'translateY('+thisTop+')', '-ms-transform':'translateY('+thisTop+')', /* IE 9 */ '-moz-transform':'translateY('+thisTop+')', /* Firefox */ '-webkit-transform':'translateY('+thisTop+')', /* Safari 和 Chrome */ '-o-transform':'translateY('+thisTop+')', '-ms-transition':setting.speed/1000+'s', '-moz-transition':setting.speed/1000+'s', '-webkit-transition':setting.speed/1000+'s', '-o-transition':setting.speed/1000+'s', 'transition':setting.speed/1000+'s' }); } }else{ setting.iniAnimate = true; $(this).css({ top : thisTop }); } } }); } //初始化 var init = function($parent){ //初始化 $parent.html(setNumDom(numToArr(setting.num))); runAnimate($parent); }; //重置参数 this.resetData = function(num){ var newArr = numToArr(num); var $dom = $(this).find(".mt-number-animate-dom"); if($dom.length < newArr.length){ $(this).html(setNumDom(numToArr(num))); }else{ $dom.each(function(index, el) { $(this).attr("data-num",newArr[index]); }); } runAnimate($(this)); } //init init($(this)); return this; } })(jQuery);