這篇文章主要介紹了用隊列模擬jquery的動畫算法,實例分析了用隊列模擬jquery的動畫算法的原理與實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了用隊列模擬jquery的動畫算法。分享給大家供大家參考。具體分析如下：
Aaron最近瘋狂的愛上了算法研究，估計又要死傷不少腦細胞了，我喜歡撿現(xiàn)成的，可以省些力氣。發(fā)現(xiàn)他寫的一段源碼，運行一下，還蠻好玩的，于是拿來分析一下，一來吸收下里邊的營養(yǎng)，二來加深一下源碼學習的功力。話說這源碼還真是提高js內(nèi)功的一大秘決，不信，就和我一起來品味一下吧。
代碼如下:
//立即執(zhí)行函數(shù)，沒有什么好說的?？聪旅嫜菔?BR> /**
(function($){
//此處的$會由后面緊跟的立即執(zhí)行函數(shù)的返回值提供
})(function(){
//這個函數(shù)運行的結(jié)果就是$啦
return aQuery
}())
*/
(function($) {
window.$ = $;
})(function() {
//用來匹配ID字符串
//(?:表示這里不分組) ，參考正則的內(nèi)容
//不過我個人認為把*改成+號會更好，因為#后至少要一個字符吧
var rquickExpr = /^(?:#([\w-]*))$/;
//一看便是jquery的重度患者
function aQuery(selector) {
return new aQuery.fn.init(selector);
}
/**
* 動畫
* @return {[type]} [description]
*/
var animation = function() {
var self = {};
var Queue = []; //動畫隊列
var fireing = false //動畫鎖
var first = true; //通過add接口觸發(fā)
var getStyle = function(obj, attr) {
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
//這里邊都是具體的動畫效果，沒有什么難懂的
var makeAnim = function(element, options, func) {
var width = options.width
//包裝了具體的執(zhí)行算法
//css3
//setTimeout
element.style.webkitTransitionDuration = '2000ms';
element.style.webkitTransform = 'translate3d(' + width + 'px,0,0)';
//監(jiān)聽動畫完結(jié)
element.addEventListener('webkitTransitionEnd', function() {
func()
});
}
var _fire = function() {
//加入動畫正在觸發(fā)
if (!fireing) {
var onceRun = Queue.shift();
if (onceRun) {
//防止重復(fù)觸發(fā)
fireing = true;
//next
onceRun(function() {
fireing = false;
//這里很巧妙的產(chǎn)生了連環(huán)調(diào)用的效果
_fire();
});
} else {
fireing = true;
}
}
}
return self = {
//增加隊列
add: function(element, options) {
//這里是整個算法的關(guān)鍵
//相當于往數(shù)組中添加一個函數(shù)
//[function(func){},...]
//也就是_fire中的onceRun方法，func也就是在那時傳進去的。
//在Aaron的編程中很喜歡用這種技巧，比如預(yù)編譯什么的。
Queue.push(function(func) {
makeAnim(element, options, func);
});
//如果有一個隊列立刻觸發(fā)動畫
if (first && Queue.length) {
//這個開關(guān)很好的起到了控制后面添加的元素進行排隊的作用
first = false;
//這里等價于直接運行_fire();
//Aaron喜歡裝A，故意添加一個self.fire出來，或許他是深謀遠慮
self.fire();
}
},
//觸發(fā)
fire: function() {
_fire();
}
}
}();
aQuery.fn = aQuery.prototype = {
run: function(options) {
animation.add(this.element, options);
return this;
}
}
var init = aQuery.fn.init = function(selector) {
var match = rquickExpr.exec(selector);
var element = document.getElementById(match[1])
this.element = element;
return this;
}
//差點小看了這一行代碼
//jquery的樣子學的不錯
//直接aQuery.fn.init = aQuery.fn不是更好?
//多一個init變量無非是想減少查詢罷了，優(yōu)化的思想無處不在。
init.prototype = aQuery.fn;
return aQuery;
}());
//dom
var oDiv = document.getElementById('div1');
//調(diào)用
oDiv.onclick = function() {
$('#div1').run({
'width': '500'
}).run({
'width': '300'
}).run({
'width': '1000'
});
};
附上html就可以自己調(diào)式了。要記得用chrome瀏覽哦。
代碼如下:
<div id="div1" data-mce-style="width: 100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">點擊</div>
希望本文所述對大家的jQuery程序設(shè)計有所幫助。