第62天：手风琴效果
手风琴效果：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>手风琴效果</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 }
12 div{
13 width: 1200px;
14 height: 400px;
15 margin: 100px auto;
16 border:1px solid red;
17 overflow: hidden;
18 }
19 div li{
20 width: 240px;
21 height: 400px;
22 float: left;
23 }
24 div ul{
25 width: 1300px;
26 }
27 </style>
28 </head>
29 <body>
30 <div>
31 <ul>
32 <li></li>
33 <li></li>
34 <li></li>
35 <li></li>
36 <li></li>
37 </ul>
38 </div>
39 </body>
40 </html>
41 <script src="animate.js" type="text/javascript"></script><!--引入动画js-->
42 <script>
43 var box=document.getElementsByTagName("div")[0];
44 var lis=box.children[0].children;
45 for(var i=0;i<=lis.length;i++){
46 lis[i].style.backgroundImage="url(images/"+(i+1)+".jpg)";
47 lis[i].onmouseover=function(){
48 for(var i=0;i<lis.length;i++){
49 animate(lis[i],{width:100})//调用动画函数 li宽度变成100
50 }
51 animate(this,{width:800})//当前li宽度改为800
52 }
53 lis[i].onmouseout=function(){
54 for(var i=0;i<lis.length;i++){
55 animate(lis[i],{width:240})//鼠标移出每个li宽度都改为初始值
56 }
57 }
58 }
59 </script>
运行效果：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-10-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读