前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第62天:手风琴效果

第62天:手风琴效果

作者头像
半指温柔乐
发布2018-09-11 11:54:55
1.1K0
发布2018-09-11 11:54:55
举报
文章被收录于专栏:前端知识分享

手风琴效果:

代码语言:javascript
复制
 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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档