// 数字滚动插件
;(function($) {
$.fn.numberanimate = function(setting) {
var defaults = {
speed : 1000,//动画速度
num : "", //初始化值
inianimate : true, //是否要初始化动画效果
symbol : '',//默认的分割符号,千,万,千万
dot : 0 //保留几位小数点
}
//如果setting为空,就取default的值
var setting = $.extend(defaults, setting);
//如果对象有多个,提示出错
if($(this).length > 1){
alert("just only one obj!");
return;
}
//如果未设置初始化值。提示出错
if(setting.num == ""){
alert("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';
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);