[Jquery]滑动门效果

$(function(){
   var $box=$("#box");
   var $img=$box.find("img");
   var imgWidth=$img.eq(0).width();
   var exposeWidth=160;
   var boxWidth=imgWidth+exposeWidth*($img.length-1);
   var translate=imgWidth-exposeWidth;
   $box.width(boxWidth);
   $img.not($img.eq(0)).each(function(i){   //i从0开始
       var left=imgWidth+i*exposeWidth;
       $(this).css("left",left);
       $(this).data("pos",left);                       //向pos元素附加数据left
   });
   $img.each(function(i){
       $(this).mouseover(function(){
           //开门
           for(var j=1;j<=i;j++){
               var $imgs=$img.eq(j);
               $imgs.animate({"left":$imgs.data("pos")-translate},200);              //从pos元素取得初始位置
           }
           //关门
           for(var j=i+1,len=$img.length;j<len;j++){
               var $imgs=$img.eq(j);
               $imgs.animate({"left":$imgs.data("pos")},200);
           }
       });

});
});

巴特西

[Jquery]滑动门效果

最新文章

热门文章