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         }

 

posted @ 2020-04-10 13:56  RitaD  阅读(1239)  评论(0)  编辑  收藏  举报