前言
大家應該都有所體會，在一些數據展示的專題頁里，有時候希望數字能動態從某一個數變化到另一個數，以此來吸引用戶眼球，突出數據。于是有了下文。
在這里，我用了兩種方式：一種是原生的JavaScript，另一種是jQuery插件。
數字線性變化的原理很簡單，就是讓數字增量變化，并循環動畫。
原生JS版
首先獲取DOM元素。為了兼容到IE6，兼容性方法如下：
var domUtil = { // 獲取DOM元素 get: function(query) { var _this = this; if(document.querySelector) { return document.querySelector(query); } else { var elements = document; var queryStrArray = query.split(/ +/); for(var i = 0; i < queryStrArray.length; i++) { var domName = queryStrArray[i]; elements = _this.getElementsOfParentNode(domName, elements); } if(elements.length == 1) { return elements[0]; } else { return elements; } } }, // 獲取DOM元素 getElementsOfParentNode: function(domName, parentNode) { var _this = this; parentNode = parentNode || document; domName = domName.trim(); var regExps = { id: /^#/, class: /^/ }; if(regExps.id.test(domName)) { domName = domName.replace(/^/#/g, ""); return parentNode.getElementById(domName); } else if(regExps.class.test(domName)) { domName = domName.replace(/^./g, ""); return _this.getElementsByClassName(domName, parentNode); } else { return parentNode.getElementsByTagName(domName); } }, // 獲取class元素的兼容方法 getElementsByClassName: function(className, parentNode) { if(parentNode.getElementsByClassName){ return parentNode.getElementsByClassName(className); } else { className = className.replace(/^ +| +$/g,""); var classArray = className.split(/ +/); var eles = parentNode.getElementsByTagName("*"); for(var i = 0;i < classArray.length; i++){ var classEles = []; var reg = new RegExp("(^| )" + classArray[i] + "( |$)"); for(var j = 0;j < eles.length; j++){ var ele = eles[j]; if(reg.test(ele.className)){ classEles.push(ele); } } eles = classEles; } return eles; } }};/* * 數字動畫（目前僅支持數字動畫的線性變化） * options參數： * element {String} DOM元素query字符串 * from {Number} 起始數字 * to {Number} 終點數字 * duration {Number} 動畫時間 * callback {Function} 數字變化時的回調函數 */var animatingNumber = function(options) { this.element = domUtil.get(options.element); this.startNum = options.from; this.endNum = options.to; this.duration = options.duration || 2000; this.callback = options.callback; this.timer = null;};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);};使用：
<p>Number: <span class='dynamicNum'>500</span></p><script> animatingNumber.create({ element: '.dynamicNum', from: 1, to: 500, duration: 2000 }).start();</script>jQuery插件版
原理同上，只是DOM元素獲取使用jQuery方法，并把數字動畫方法封裝成jQuery插件。
如下：
/* * 數字動畫（目前僅支持數字動畫的線性變化） * options參數： * from {Number} 起始數字 * to {Number} 終點數字 * duration {Number} 動畫時間 * callback {Function} 數字變化時的回調函數 */(function( $ ) { $.fn.animatingNumber = function(options) { var settings = { element: this, startNum: options.from, endNum: options.to, duration: options.duration || 2000, callback: options.callback }; var timer = null; var methods = { 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 );使用：
<p>Number: <span class='dynamicNum'></span></p><script>$('.dynamicNum').animatingNumber({ from: 1, to: 1000, duration: 2000});</script>最后
好了，以上就是這篇文章的全部內容了，后期會考慮加上緩動函數的選擇項。希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
新聞熱點
疑難解答
