這篇文章主要介紹了用隊(duì)列模擬jquery的動畫算法,實(shí)例分析了用隊(duì)列模擬jquery的動畫算法的原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了用隊(duì)列模擬jquery的動畫算法。分享給大家供大家參考。具體分析如下：

Aaron最近瘋狂的愛上了算法研究，估計(jì)又要死傷不少腦細(xì)胞了，我喜歡撿現(xiàn)成的，可以省些力氣。發(fā)現(xiàn)他寫的一段源碼，運(yùn)行一下，還蠻好玩的，于是拿來分析一下，一來吸收下里邊的營養(yǎng)，二來加深一下源碼學(xué)習(xí)的功力。話說這源碼還真是提高js內(nèi)功的一大秘決，不信，就和我一起來品味一下吧。

代碼如下:

//立即執(zhí)行函數(shù)，沒有什么好說的?？聪旅嫜菔?/p>

/**

(function($){

//此處的$會由后面緊跟的立即執(zhí)行函數(shù)的返回值提供

})(function(){

//這個函數(shù)運(yùn)行的結(jié)果就是$啦

return aQuery

}())

*/

(function($) {

window.$ = $;

})(function() {

//用來匹配ID字符串

//(?:表示這里不分組) ，參考正則的內(nèi)容

//不過我個人認(rèn)為把*改成+號會更好，因?yàn)?后至少要一個字符吧

var rquickExpr = /^(?:#([\w-]*))$/;

//一看便是jquery的重度患者

function aQuery(selector) {

return new aQuery.fn.init(selector);

}

/**

* 動畫

* @return {[type]} [description]

*/

var animation = function() {

var self = {};

var Queue = []; //動畫隊(duì)列

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 = {

//增加隊(duì)列

add: function(element, options) {

//這里是整個算法的關(guān)鍵

//相當(dāng)于往數(shù)組中添加一個函數(shù)

//[function(func){},...]

//也就是_fire中的onceRun方法，func也就是在那時傳進(jìn)去的。

//在Aaron的編程中很喜歡用這種技巧，比如預(yù)編譯什么的。

Queue.push(function(func) {

makeAnim(element, options, func);

});

//如果有一個隊(duì)列立刻觸發(fā)動畫

if (first && Queue.length) {

//這個開關(guān)很好的起到了控制后面添加的元素進(jìn)行排隊(duì)的作用

first = false;

//這里等價(jià)于直接運(yùn)行_fire();

//Aaron喜歡裝A，故意添加一個self.fire出來，或許他是深謀遠(yuǎn)慮

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;

}

//差點(diǎn)小看了這一行代碼

//jquery的樣子學(xué)的不錯

//直接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" style="width:100px;height:50px;background:red;cursor:pointer;color:#fff;text-align:center;line-height:50px;" data-mce-style="width: 100px; height: 50px; background: red; cursor: pointer; color: #fff; text-align: center; line-height: 50px;">點(diǎn)擊</div>

希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。

更多信息請查看IT技術(shù)專欄