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>