页面手风琴效果

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,这样就实现了简单的手风琴效果！！！

相关阅读:
77. Combinations
76. Minimum Window Substring
75. Sort Colors
74. Search a 2D Matrix
73. Set Matrix Zeroes
72. Edit Distance
71. Simplify Path
70. Climbing Stairs
线段树+欧拉函数——cf1114F
区间dp——好题cf1132F
原文地址：https://www.cnblogs.com/homeathere/p/12650154.html