jq手风琴效果 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         *{
  8             padding:0;
  9             margin:0;
 10         }
 11         ul,ol{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16             color:#333;
 17         }
 18         .box{
 19             width: 900px;
 20             height: 300px;
 21             border: 1px solid #000;
 22             margin: 50px auto;
 23             overflow: hidden;
 24             position: relative;
 25         }
 26         .box ul li{
 27             position: absolute;
 28             left:0px;
 29             width: 560px;
 30             height: 300px;
 31         }
 32         .box ul li.no1{
 33             left:180px;
 34         }
 35         .box ul li.no2{
 36             left:360px;
 37         }
 38         .box ul li.no3{
 39             left:540px;
 40         }
 41         .box ul li.no4{
 42             left:720px;
 43         }
 44         .box ul li .mask{
 45             position: absolute;
 46             width: 560px;
 47             height: 300px;
 48             left:0;
 49             top:0;
 50             background-color: rgba(0,0,0,.6);
 51         }
 52     </style>
 53 </head>
 54 <body>
 55     <div class="box">
 56         <ul>
 57             <li class="no0">
 58                 <div class="mask"></div>
 59                 <a href=""><img src="images/0.jpg" alt=""></a>
 60             </li>
 61             <li class="no1">
 62                 <div class="mask"></div>
 63                 <a href=""><img src="images/1.jpg" alt=""></a>
 64             </li>
 65             <li class="no2">
 66                 <div class="mask"></div>
 67                 <a href=""><img src="images/2.jpg" alt=""></a>
 68             </li>
 69             <li class="no3">
 70                 <div class="mask"></div>
 71                 <a href=""><img src="images/3.jpg" alt=""></a>
 72             </li>
 73             <li class="no4">
 74                 <div class="mask"></div>
 75                 <a href=""><img src="images/4.jpg" alt=""></a>
 76             </li>
 77         </ul>
 78     </div>
 79     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
 80     <script type="text/javascript">
 81         $("li").mouseenter(function(){
 82             // 将触发事件的对象序号保存
 83             var idx = $(this).index();
 84             // 小于等于序号往左移动85
 85             $("li:lt(" + (idx + 1) + ")").each(function(i){
 86                 $(this).animate({"left": 85 * i},400);
 87             });
 88 
 89             // 大于信号序号往右移动
 90             $("li:gt(" + idx + ")").each(function(i){
 91                 // console.log(i);
 92                 $(this).animate({"left": 560 + 85 * (idx + i)},400);
 93             });
 94 
 95             // 鼠标进入图片去掉蒙版
 96             $(this).children(".mask").fadeOut();
 97             // 其他兄弟加上蒙版
 98             $(this).siblings().children(".mask").fadeIn();
 99         });
100 
101 
102         // 鼠标离开恢复原状
103         $(".box").mouseleave(function(){
104             $("li").stop(true);
105             $("li").each(function(i){
106                 // console.log(i);
107                 $(this).animate({"left": 180 * i},400);
108             });
109             $("li").children(".mask").fadeIn();
110         });
111 
112 
113 
114 
115 
116     </script>
117 </body>
118 </html>

 

posted @ 2017-12-19 20:32  ︶ㄣ鳯躌氷瀚  阅读(155)  评论(0)    收藏  举报