今天来做一个简单的手风琴特效.
效果如下图所示:
在这里我用了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 789 + "px" 9 }).siblings().stop().animate({ 10 100 + "px" 11 }) 12 }); 13 }); 14 </script>
在这里我的是鼠标的hover事件,也就是鼠标悬停事件,在这里可以改为点击事件,这个根据自己的需求来.