手风琴特效

今天来做一个简单的手风琴特效.

效果如下图所示:

在这里我用了jquery.

 

简单来说就是当鼠标移到相应图片上时,改变width的属性.

首先写页面内容:,在body标签里面放一个盒子和一个列表就可以了:

html:

 1 <div id="frame">
 2     <div id="content">
 3         <ul class="clearfix">
 4             <li>
 5                 <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
 6             </li>
 7             <li>
 8                 <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
 9             </li>
10             <li>
11                 <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
12             </li>
13             <li>
14                 <p><span>我的个人拉萨之旅丨丨故事之城</span></p>
15             </li>
16         </ul>
17     </div>
18 </div>

接下来用css布局:

 1 <style>
 2     * {
 3         padding: 0;
 4         margin: 0;
 5     }
 6             
 7     li {
 8         list-style: none;
 9     }
10     
11     body {
12         background: url(img/1_bg.jpg) no-repeat center top;
13     }
14     
15     #frame {
16         height: 430px;
17         width: 1089px;
18         margin: 200px auto 0;
19     }
20             
21     #content {
22         height: 100%;
23         width: 100%;
24         overflow: hidden;
25     }
26             
27     #content ul {
28         width: 200%;
29     }
30             
31     #content li {
32         float: left;
33         position: relative;
34         height: 430px;
35         width: 100px;
36         background-image: url(img/2_1.jpg);
37     }
38             
39     #content li:nth-child(1) {
40         background-image: url(img/2_1.jpg);
41     }
42             
43     #content li:nth-child(2) {
44                 background-image: url(img/4_2.jpg);
45     }
46             
47     #content li:nth-child(3) {
48         background-image: url(img/5_3.jpg);
49     }
50             
51     #content li:nth-child(4) {
52         background-image: url(img/6_4.jpg);
53     }
54             
55     #content li p {
56         position: absolute;
57         left: 0;
58         top: 0;
59         width: 100px;
60         height: 100%;
61         background-color: rgba(0, 0, 0, .5);
62     }
63             
64     #content li p span {
65         display: block;
66         width: 14px;
67         font-size: 14px;
68         margin: 20px auto 0;
69         color: #fff;
70     }
71             
72     .clearfix:after {
73         content: "";
74         display: block;
75         clear: both;
76     }
77 </style>

 

最后就该写事件了:

JavaScript:

 1 <script type="text/javascript">
 2     $(function() {
 3         var $content = $("#content");
 4         var $list = $content.find("ul li");
 5         $list.last().css("width", "789px");
 6         $list.hover(function() {
 7             $(this).stop().animate({
 8                 width: 789 + "px"
 9             }).siblings().stop().animate({
10                 width: 100 + "px"
11             })
12         });
13     });
14 </script>

 

在这里我的是鼠标的hover事件,也就是鼠标悬停事件,在这里可以改为点击事件,这个根据自己的需求来.

posted @ 2019-05-27 20:53  菲H  阅读(551)  评论(0)  编辑  收藏  举报