利用原生JS與jQuery實現(xiàn)數(shù)字線性變化的動畫
前言
大家應該都有所體會,在一些數(shù)據(jù)展示的專題頁里,有時候希望數(shù)字能動態(tài)從某一個數(shù)變化到另一個數(shù),以此來吸引用戶眼球,突出數(shù)據(jù)。于是有了下文。
在這里,我用了兩種方式:一種是原生的JavaScript,另一種是jQuery插件。
數(shù)字線性變化的原理很簡單,就是讓數(shù)字增量變化,并循環(huán)動畫。
原生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; } } };
/* * 數(shù)字動畫(目前僅支持數(shù)字動畫的線性變化) * options參數(shù): * element {String} DOM元素query字符串 * from {Number} 起始數(shù)字 * to {Number} 終點數(shù)字 * duration {Number} 動畫時間 * callback {Function} 數(shù)字變化時的回調(diào)函數(shù) */ 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方法,并把數(shù)字動畫方法封裝成jQuery插件。
如下:
/* * 數(shù)字動畫(目前僅支持數(shù)字動畫的線性變化) * options參數(shù): * from {Number} 起始數(shù)字 * to {Number} 終點數(shù)字 * duration {Number} 動畫時間 * callback {Function} 數(shù)字變化時的回調(diào)函數(shù) */ (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>
最后
好了,以上就是這篇文章的全部內(nèi)容了,后期會考慮加上緩動函數(shù)的選擇項。希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關文章
JS實現(xiàn)的網(wǎng)頁倒計時數(shù)字時鐘效果
這篇文章主要介紹了JS實現(xiàn)的網(wǎng)頁倒計時數(shù)字時鐘效果,是一款非常實用的javascript倒計時特效,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03JavaScript實現(xiàn)微信小程序打卡時鐘項目實例
這篇文章主要為大家介紹了JavaScript實現(xiàn)微信小程序打卡時鐘項目實例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-04-04JS 非圖片動態(tài)loading效果實現(xiàn)代碼
功能說明:譬如在按某個button時,顯示消息"Loading”,然后每隔一秒后后面加上".",至一定數(shù)量的"."時如:"Loading...",再重置此消息為"Loading",繼續(xù)動態(tài)顯示,直至按鈕事件處理完成。2010-04-04javascript下用ActiveXObject控件替換word書簽,將內(nèi)容導出到word后打印
由于時間比較緊,沒多的時候去學習研究上述工具包,現(xiàn)在用javascript操作ActiveXObject控件,用替換word模板中的書簽方式解決。2008-06-06