1、百葉窗的簡單思路及實現(xiàn)

百葉窗的實現(xiàn)思路主要是當鼠標移入到其中一張圖，它兩邊的圖片都會往兩邊收縮。左邊第一張的left值為0px，第二張left為60px，如此一次加60px。右邊的第一張left為740px，一次減60。假如我們移入的是第三張圖片，那么運動應(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});
        })

那么我們要實現(xiàn)移入任意一張，其他的圖片都發(fā)生運動的效果首先就需要獲取所有的li，然后在對每一個li進行遍歷，再將所有l(wèi)i的left值一一對應(yīng)。由于當我們鼠標移入任意一個li的時候，所有l(wèi)i的left值并沒有明顯的可循的規(guī)律，所有我們可以將li可能具有的left值放在數(shù)組中，在遍歷的時候一一對應(yīng)。代碼如下;

  $("li").mouseenter(function(){    
     //在動畫運動之前先阻止其他動畫
        $("li").stop(true);
     //保存鼠標移入的li的下標
        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];    
     //遍歷每一個li  
        $("li").each(function(j){               
           if(j<=i){                        
              $(this).animate({"left" : left[j]},500); 
            } 
            else{                       
            $(this).animate({"left" : right[j]},500);
            };                  
        })；

這樣我們百葉窗效果就完全實現(xiàn)了。

2、百葉窗對我的啟發(fā)

雖然實現(xiàn)整個百葉窗效果所寫的代碼并不多，但整個實現(xiàn)過程還是給我?guī)砹诵┰S的啟發(fā)。

1）、用數(shù)組保存左右兩邊li的left值的思想

在我們之前實現(xiàn)的一些效果（如：輪播圖、無縫滾動），我們在遍歷每一張圖片時，他運動的值總是會有一定的規(guī)律，我們可以定義一個可以自增的整數(shù)將運動的值和這個整數(shù)關(guān)聯(lián)起來。在我自己實現(xiàn)百葉窗效果的過程中，我也試圖去尋找類似的關(guān)聯(lián)，但是找了很久，都沒有發(fā)現(xiàn)可遵循的規(guī)律。最后通過杰哥的講解我了解到可以通過將li可能的left值保存在數(shù)組中，在遍歷時通過數(shù)組下標和元素下標一一對應(yīng)的方式來實現(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é)流和阻止動畫

由于在整個效果中存在這運動函數(shù)，并且在鼠標切換過程中都會調(diào)用新的運動函數(shù)，因此當我們鼠標切換太過頻繁時就會錯亂，因此我們使用了函數(shù)節(jié)流和阻止動畫的方式來避免這種情況。代碼實現(xiàn)如下：

//函數(shù)節(jié)流
if($("div").is(":animated")){

        return ;
};
//阻止動畫
$("div").stop(true);