第62天：手风琴效果

最新推荐文章于 2024-10-24 18:21:54 发布

lelara

最新推荐文章于 2024-10-24 18:21:54 发布

阅读量91

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/lelara/article/details/84577522

版权

javascript 专栏收录该内容

68 篇文章 1 订阅

订阅专栏

手风琴效果：

 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>

运行效果：