jQuery实现百叶窗及启发

1、百叶窗的简单思路及实现

百叶窗的实现思路主要是当鼠标移入到其中一张图，它两边的图片都会往两边收缩。左边第一张的left值为0px，第二张left为60px，如此一次加60px。右边的第一张left为740px，一次减60。假如我们移入的是第三张图片，那么运动应该为：

        $(".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});
        })

那么我们要实现移入任意一张，其他的图片都发生运动的效果首先就需要获取所有的li，然后在对每一个li进行遍历，再将所有li的left值一一对应。由于当我们鼠标移入任意一个li的时候，所有li的left值并没有明显的可循的规律，所有我们可以将li可能具有的left值放在数组中，在遍历的时候一一对应。代码如下;

  $("li").mouseenter(function(){    
     //在动画运动之前先阻止其他动画
        $("li").stop(true);
     //保存鼠标移入的li的下标
        var i = $(this).index(); 
     //将我们移入图片左边li的可能left值保存在left数组中
        var left = [0,60,120,180,240];
     //将我们移入图片右边li的可能left值保存在right数组中
        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);
            };                  
        })；

这样我们百叶窗效果就完全实现了。

2、百叶窗对我的启发

虽然实现整个百叶窗效果所写的代码并不多，但整个实现过程还是给我带来了些许的启发。

1）、用数组保存左右两边li的left值的思想

在我们之前实现的一些效果（如：轮播图、无缝滚动），我们在遍历每一张图片时，他运动的值总是会有一定的规律，我们可以定义一个可以自增的整数将运动的值和这个整数关联起来。在我自己实现百叶窗效果的过程中，我也试图去寻找类似的关联，但是找了很久，都没有发现可遵循的规律。最后通过杰哥的讲解我了解到可以通过将li可能的left值保存在数组中，在遍历时通过数组下标和元素下标一一对应的方式来实现，具体代码如下：

       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)、函数节流和阻止动画

由于在整个效果中存在这运动函数，并且在鼠标切换过程中都会调用新的运动函数，因此当我们鼠标切换太过频繁时就会错乱，因此我们使用了函数节流和阻止动画的方式来避免这种情况。代码实现如下：

//函数节流
if($("div").is(":animated")){

        return ;
};
//阻止动画
$("div").stop(true);