1、百葉窗的簡(jiǎn)單思路及實(shí)現(xiàn)
百葉窗的實(shí)現(xiàn)思路主要是當(dāng)鼠標(biāo)移入到其中一張圖，它兩邊的圖片都會(huì)往兩邊收縮啄清。左邊第一張的left值為0px，第二張left為60px俺孙，如此一次加60px辣卒。右邊的第一張left為740px，一次減60睛榄。假如我們移入的是第三張圖片荣茫，那么運(yùn)動(dòng)應(yīng)該為：
$(".no2").mouseenter(function() {
$("li").stop(true);
$(".no0").animate({"left": 0});
$(".no1").animate({"left": 60});
$(".no2").animate({"left": 120});
$(".no3").animate({"left": 680});
$(".no4").animate({"left": 740});
})
那么我們要實(shí)現(xiàn)移入任意一張，其他的圖片都發(fā)生運(yùn)動(dòng)的效果首先就需要獲取所有的li懈费，然后在對(duì)每一個(gè)li進(jìn)行遍歷计露，再將所有l(wèi)i的left值一一對(duì)應(yīng)。由于當(dāng)我們鼠標(biāo)移入任意一個(gè)li的時(shí)候憎乙，所有l(wèi)i的left值并沒(méi)有明顯的可循的規(guī)律票罐，所有我們可以將li可能具有的left值放在數(shù)組中，在遍歷的時(shí)候一一對(duì)應(yīng)泞边。代碼如下;
$("li").mouseenter(function(){
//在動(dòng)畫(huà)運(yùn)動(dòng)之前先阻止其他動(dòng)畫(huà)
$("li").stop(true);
//保存鼠標(biāo)移入的li的下標(biāo)
var i = $(this).index();
//將我們移入圖片左邊li的可能left值保存在left數(shù)組中
var left = [0,60,120,180,240];
//將我們移入圖片右邊li的可能left值保存在right數(shù)組中
var right = [0,560,620,680,740];
//遍歷每一個(gè)li
$("li").each(function(j){
if(j<=i){
$(this).animate({"left" : left[j]},500);
}
else{
$(this).animate({"left" : right[j]},500);
};
})该押；
這樣我們百葉窗效果就完全實(shí)現(xiàn)了。
2阵谚、百葉窗對(duì)我的啟發(fā)
雖然實(shí)現(xiàn)整個(gè)百葉窗效果所寫(xiě)的代碼并不多蚕礼，但整個(gè)實(shí)現(xiàn)過(guò)程還是給我?guī)?lái)了些許的啟發(fā)。
1）梢什、用數(shù)組保存左右兩邊li的left值的思想
在我們之前實(shí)現(xiàn)的一些效果（如：輪播圖奠蹬、無(wú)縫滾動(dòng)），我們?cè)诒闅v每一張圖片時(shí)嗡午，他運(yùn)動(dòng)的值總是會(huì)有一定的規(guī)律囤躁，我們可以定義一個(gè)可以自增的整數(shù)將運(yùn)動(dòng)的值和這個(gè)整數(shù)關(guān)聯(lián)起來(lái)。在我自己實(shí)現(xiàn)百葉窗效果的過(guò)程中，我也試圖去尋找類(lèi)似的關(guān)聯(lián)狸演，但是找了很久言蛇，都沒(méi)有發(fā)現(xiàn)可遵循的規(guī)律。最后通過(guò)杰哥的講解我了解到可以通過(guò)將li可能的left值保存在數(shù)組中宵距，在遍歷時(shí)通過(guò)數(shù)組下標(biāo)和元素下標(biāo)一一對(duì)應(yīng)的方式來(lái)實(shí)現(xiàn)腊尚，具體代碼如下：
var left = [0,60,120,180,240];
var right = [0,560,620,680,740];
$("li").each(function(j){
if(j<=i){
$(this).animate({"left" : left[j]},500);
}
else{
$(this).animate({"left" : right[j]},500);
};
})；
2)满哪、函數(shù)節(jié)流和阻止動(dòng)畫(huà)
由于在整個(gè)效果中存在這運(yùn)動(dòng)函數(shù)婿斥，并且在鼠標(biāo)切換過(guò)程中都會(huì)調(diào)用新的運(yùn)動(dòng)函數(shù)，因此當(dāng)我們鼠標(biāo)切換太過(guò)頻繁時(shí)就會(huì)錯(cuò)亂翩瓜，因此我們使用了函數(shù)節(jié)流和阻止動(dòng)畫(huà)的方式來(lái)避免這種情況受扳。代碼實(shí)現(xiàn)如下：
//函數(shù)節(jié)流
if($("div").is(":animated")){
return ;
};
//阻止動(dòng)畫(huà)
$("div").stop(true);
