利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化的動(dòng)畫
更新時(shí)間：2017年02月24日 09:46:06 作者：子匠_Zijor
最近在工作中遇到一個(gè)需要，需要將數(shù)字實(shí)現(xiàn)遞增的動(dòng)態(tài)顯示，從網(wǎng)上找了相關(guān)的資料發(fā)現(xiàn)利用原生JS與jQuery都可以實(shí)現(xiàn)，suoyi8下面這篇文章主要給大家介紹了利用原生JS與jQuery實(shí)現(xiàn)數(shù)字線性變化動(dòng)畫的相關(guān)資料，需要的朋友可以參考下。
前言
大家應(yīng)該都有所體會(huì)，在一些數(shù)據(jù)展示的專題頁里，有時(shí)候希望數(shù)字能動(dòng)態(tài)從某一個(gè)數(shù)變化到另一個(gè)數(shù)，以此來吸引用戶眼球，突出數(shù)據(jù)。于是有了下文。
在這里，我用了兩種方式：一種是原生的JavaScript，另一種是jQuery插件。
數(shù)字線性變化的原理很簡(jiǎn)單，就是讓數(shù)字增量變化，并循環(huán)動(dòng)畫。
原生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ù)字動(dòng)畫（目前僅支持?jǐn)?shù)字動(dòng)畫的線性變化）
* options參數(shù)：
* element {String} DOM元素query字符串
* from {Number} 起始數(shù)字
* to {Number} 終點(diǎn)數(shù)字
* duration {Number} 動(dòng)畫時(shí)間
* callback {Function} 數(shù)字變化時(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ù)字動(dòng)畫方法封裝成jQuery插件。
如下：
/*
* 數(shù)字動(dòng)畫（目前僅支持?jǐn)?shù)字動(dòng)畫的線性變化）
* options參數(shù)：
* from {Number} 起始數(shù)字
* to {Number} 終點(diǎn)數(shù)字
* duration {Number} 動(dòng)畫時(shí)間
* callback {Function} 數(shù)字變化時(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>
最后
好了，以上就是這篇文章的全部?jī)?nèi)容了，后期會(huì)考慮加上緩動(dòng)函數(shù)的選擇項(xiàng)。希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
JS實(shí)現(xiàn)的網(wǎng)頁倒計(jì)時(shí)數(shù)字時(shí)鐘效果
這篇文章主要介紹了JS實(shí)現(xiàn)的網(wǎng)頁倒計(jì)時(shí)數(shù)字時(shí)鐘效果,是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)微信小程序打卡時(shí)鐘項(xiàng)目實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
一個(gè)php+js實(shí)時(shí)顯示時(shí)間問題
本文給大家分享的是解決的php+js實(shí)時(shí)顯示時(shí)間問題，主要是自己當(dāng)時(shí)的理解有問題，也許大家有和我一樣的情況，這里分享給大家2015-10-10
這篇文章主要介紹了JavaScript構(gòu)建自己的模板小引擎,結(jié)合實(shí)例形式分析了javascript自定義模板引擎的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2018-12-12
JS判斷是否手機(jī)或pad訪問實(shí)現(xiàn)方法
這篇文章主要介紹了JS判斷是否手機(jī)或pad訪問實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-12-12
JS 非圖片動(dòng)態(tài)loading效果實(shí)現(xiàn)代碼
功能說明：譬如在按某個(gè)button時(shí)，顯示消息"Loading”，然后每隔一秒后后面加上"."，至一定數(shù)量的"."時(shí)如："Loading..."，再重置此消息為"Loading"，繼續(xù)動(dòng)態(tài)顯示，直至按鈕事件處理完成。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js代碼實(shí)現(xiàn)多人聊天室，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
國(guó)外人寫的在線壓縮和格式化工具這兩套程序都是用純 JavaScript 寫的，可以下載下來離線使用，很方便。2009-01-01
javascript下用ActiveXObject控件替換word書簽，將內(nèi)容導(dǎo)出到word后打印
由于時(shí)間比較緊，沒多的時(shí)候去學(xué)習(xí)研究上述工具包，現(xiàn)在用javascript操作ActiveXObject控件，用替換word模板中的書簽方式解決。2008-06-06
前面我們學(xué)習(xí)了jQuery的方式開發(fā)插件，講訴的都是些基礎(chǔ)的理論知識(shí)，今天開始，我們就來實(shí)戰(zhàn)一下，學(xué)習(xí)開發(fā)自己的插件庫(kù)。2015-01-01