javascript 实现手风琴特效

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style media="screen">
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         div {
14             width: 1150px;
15             height: 400px;
16             margin: 50px auto;
17             border: 1px solid #ddd;
18             overflow: hidden;
19         }
20         ul {
21             list-style: none;
22         }
23         div ul {
24             width: 1300px;
25         }
26         div li {
27             width: 240px;
28             height: 400px;
29             float: left;
30             cursor: pointer;
31         }
32     </style>
33 </head>
34 <body>
35     <div>
36         <ul>
37             <li></li>
38             <li></li>
39             <li></li>
40             <li></li>
41             <li></li>
42         </ul>
43     </div>
44 
45     <script src="animate.js" charset="utf-8"></script>
46     <script type="text/javascript">
47         var div = document.getElementsByTagName("div")[0];
48         var liArr = div.getElementsByTagName("li");
49         //给li添加背景颜色
50         var colorArr = ["mistyrose", "lemonchiffon", "gold", "orange", "tomato"];
51         for (var i = 0; i < colorArr.length; i++) {
52             liArr[i].style.backgroundColor = colorArr[i];
53             
54             //绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
55             liArr[i].onmouseover = function(){
56                 //排他思想
57                 for (var j = 0; j < liArr.length; j++) {
58                     //引用框架实现宽度变窄
59                     animate(liArr[j],{"width": 100});
60                 }
61                 //剩下自己
62                 animate(this,{"width": 800});
63             }
64         }
65         //移开大盒子，回复原样
66         div.onmouseout = function(){
67             for (var j = 0; j < liArr.length; j++) {
68                 //引用框架实现宽度变窄
69                 animate(liArr[j],{"width": 240});
70             }
71         }
72     </script>
73 </body>
74 </html>
javascript 实现手风琴特效

猜你喜欢
