前言
大家应该都有所体会，在一些数据展示的专题页里，有时候希望数字能动态从某一个数变化到另一个数，以此来吸引用户眼球，突出数据。于是有了下文。
在这里，我用了两种方式：一种是原生的JavaScript，另一种是jQuery插件。
数字线性变化的原理很简单，就是让数字增量变化，并循环动画。
原生JS版
};
animatingNumber.prototype = {
start: function() {
var _this = this;
_this.animate();
},stop: function() {
if(this.timer) {
clearTimeout(this.timer);
this.timer = null;
}
},animate: function() {
var _this = this;
var curNum = _this.startNum;
var animateTime = 0;
var range = _this.endNum - _this.startNum;
var timerStep = Math.abs( Math.floor(_this.duration / range) );
timerStep = timerStep > 20 ? timerStep : 20;
var numStep = (range / _this.duration) * timerStep;
_this.stop();
(function animate() {
_this.timer = setTimeout(function() {
curNum = Math.ceil( curNum + numStep );
if( (_this.endNum > _this.startNum && curNum >= _this.endNum) || (_this.endNum < _this.startNum && curNum <= _this.endNum) ) {
curNum = _this.endNum;
}
_this.element.innerText = curNum;
animateTime++;
if(typeof this.callback == 'function') {
this.callback(curNum);
}
animate();
if(curNum >= _this.endNum) {
_this.stop();
}
},timerStep);
})();
}
};
animatingNumber.create = function(options) {
return new animatingNumber(options);
};@H_404_16@
使用：
jQuery插件版
原理同上，只是DOM元素获取使用jQuery方法，并把数字动画方法封装成jQuery插件。
如下：
start: function() {
var _this = this;
_this.animate();
},stop: function() {
if(timer) {
clearTimeout(timer);
timer = null;
}
},animate: function() {
var _this = this;
var curNum = settings.startNum;
var animateTime = 0;
var range = settings.endNum - settings.startNum;
var timerStep = Math.abs( Math.floor(settings.duration / range) );
timerStep = timerStep > 20 ? timerStep : 20;
var numStep = (range / settings.duration) * timerStep;
_this.stop();
(function animate() {
timer = setTimeout(function() {
curNum = Math.ceil( curNum + numStep );
if( (settings.endNum > settings.startNum && curNum >= settings.endNum) || (settings.endNum < settings.startNum && curNum <= settings.endNum) ) {
curNum = settings.endNum;
}
settings.element.text(curNum);
animateTime++;
if(typeof settings.callback == 'function') {
settings.callback(curNum);
}
animate();
if(curNum >= settings.endNum) {
_this.stop();
}
},timerStep);
})();}
};
return this.each(function() {
return methods.start();
});
};
})( jQuery );@H_404_16@
使用：
最后
好了，以上就是这篇文章的全部内容了，后期会考虑加上缓动函数的选择项。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
