[Jquery]滑动门效果

最新推荐文章于 2025-08-22 11:32:18 发布

weixin_33755557

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhangwenkan/p/3865795.html

本文介绍了一种使用jQuery实现的图片滑动展示效果。通过计算图片宽度和展示区域的宽度来确定图片的位置，并利用鼠标悬停事件触发图片的动画效果，实现开门和关门的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

   });
});