jQuery实现手风琴效果
基本效果如图
javascript代码
1 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> 2 <script> 3 // 1.让当前的盒子,宽度变成1380px 让其与的盒子宽度变成0 4 // 2.移出的时候让所有的盒子宽度变成345px 5 $(".box").mouseover(function(){ 6 $(this) 7 .stop(true) 8 .animate({ 9 width : 1380 10 }) 11 .siblings(".box") 12 .stop(true) 13 .animate({ 14 width : 0 15 }) 16 .end() 17 .children(".content") 18 .css({ 19 left : 0 20 }) 21 }) 22 23 $(".box").mouseout(function(){ 24 $(".box") 25 .stop(true) 26 .animate({ 27 width : 345 28 }) 29 .queue(function(){ 30 $(this) 31 .children(".content") 32 .css({ 33 left : 345 34 }) 35 }) 36 }) 37 </script>
html布局+css样式
1 <div class="container"> 2 <div class="wrapper"> 3 <div class="box"> 4 <div class="title" style="background-color:yellowgreen"></div> 5 <div class="content"><img src="https://img.zcool.cn/community/0150da5e8699fba80120a895bbc205.jpg@1380w" alt=""></div> 6 </div> 7 <div class="box"> 8 <div class="title" style="background-color:skyblue"></div> 9 <div class="content"><img src="https://img.zcool.cn/community/0110175e8406a3a8012165180cde75.png@1380w" alt=""></div> 10 </div> 11 <div class="box"> 12 <div class="title" style="background-color:#ddd"></div> 13 <div class="content"><img src="https://img.zcool.cn/community/015a3c5e8406eaa80121651832107d.png@1380w" alt=""></div> 14 </div> 15 <div class="box"> 16 <div class="title" style="background-color:#f99"></div> 17 <div class="content"><img src="https://img.zcool.cn/community/01a2675e840704a80120a8952b329a.png@1380w" alt=""></div> 18 </div> 19 </div> 20 </div>
1 *{ 2 margin:0; 3 padding:0; 4 } 5 .container{ 6 width:1380px; 7 height:350px; 8 margin:100px auto; 9 overflow: hidden; 10 } 11 .wrapper{ 12 width : 1400px; 13 } 14 .box{ 15 width : 345px; 16 height : 350px; 17 float: left; 18 position: relative; 19 overflow: hidden; 20 } 21 .box .title{ 22 width : 345px; 23 height:350px; 24 background-color : #ddd; 25 } 26 .box .content{ 27 position: absolute; 28 top:0; 29 left : 345px; 30 }