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>
