页面手风琴效果

1、HTML结构：
 1 <div class="container">
 2        <div class="wrapper">
 3             <div class="box">
 4                 <div class="title" style=" -webkit-tap-highlight-color: transparent; color: rgb(206, 145, 120);">"></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=" -webkit-tap-highlight-color: transparent; color: rgb(206, 145, 120);">"></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=" -webkit-tap-highlight-color: transparent; color: rgb(206, 145, 120);">"></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=" -webkit-tap-highlight-color: transparent; color: rgb(206, 145, 120);">"></div>
17                 <div class="content"><img src="https://img.zcool.cn/community/01a2675e840704a80120a8952b329a.png@1380w" alt=""></div>
18             </div>
19        </div>
20     </div>
21

 

注：简单实现  
1、外部盒子里有四个盒子
2、内部盒子里都有一张图片和title
 
2、css:
 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         }
31

 

 
3、js实现：
这里借用一下jQuery：
 1 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
 2     <script>
 3         $(".box").mouseover(function(){
 4             $(this)
 5             .stop(true)
 6             .animate({
 7                 width : 1380
 8             })
 9             .siblings(".box")
10             .stop(true)
11             .animate({
12                 width : 0
13             })
14             .end()
15             .children(".content")
16             .css({
17                 left : 0
18             })
19         })
20  
21         $(".box").mouseout(function(){
22             $(".box")
23             .stop(true)
24             .animate({
25                 width : 345
26             })
27             .queue(function(){
28                 $(this)
29                 .children(".content")
30                 .css({
31                     left : 345
32                 })
33             })
34         })
35     
36     </script>

 

 
ok,这样就实现了简单的手风琴效果！！！
 
 
 
 
 
 
 
posted @ 2020-04-06 22:26  和平的home  阅读(269)  评论(0)  编辑  收藏  举报