JS實現圖片''推拉門''效果

時間 2019-12-12

標籤實現圖片推拉門效果欄目 JavaScript 简体版

原文原文鏈接

JS實現圖片''推拉門''效果

　　''推拉門''動效也能夠稱做"手風琴"效果，大多數效果實現的思路基本是同樣的，下面介紹兩種方法，一種是經過改變圖片的偏移位置實現移動，另外一種是經過遍歷背景圖片後改變圖片的寬度實現變換。css

　　　　　　　　　　　　　　　　　　　　　　　　　　　　推拉門收縮狀態.pnghtml

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"推拉門"展開狀態.pngjava

　　"推拉門"實現方法一：改變圖片寬度

　　html+css代碼

 1 <body>
 2     <div class="box">
 3         <ul>
 4             <!-- <li>![](images/slidepic2.jpg)</li> -->
 5             <li></li>
 6             <li></li>
 7             <li></li>
 8             <li></li>
 9             <li></li>
10         </ul>
11     </div>
12 </body>
13 
14 <style>
15         *{
16             padding: 0;
17             margin: 0;
18 
19         }
20         .box{
21             /*收縮狀態:縮放時每一個圖片的大小240px 因此總大小1200px*/
22             /*展開狀態:當前圖片寬度800px 其餘圖片寬度100px*/
23             width: 1200px;
24             height: 500px;
25             border:1px solid red;
26             margin: 50px auto;
27         }
28         .box ul{
29             list-style: none;
30             width: 1210px;
31         }
32         /*設置每一張圖片的大小和float: left*/
33         .box ul li{
34             width: 240px;
35             height: 500px;
36             /*background: url(images/slidepic2.jpg);*/
37             float: left;
38         }
39     </style>

　　jQuery實現jquery

 1 <script src = 'jquery-3.2.1.js'></script>
 2 <script>
 3     $(function(){
 4         //1遍歷每一張li  獲取每一個元素設置對應的圖片
 5         var lis = $('li');
 6         lis.each(function(index, element){
 7             //經過設置背景圖片名稱改變圖片的顯示
 8             var imgName = "images/slidepic" + (index + 2) +".jpg ";
 9             $(element).css('background', "url('"+ imgName +"')")
10         });
11         //2.展開狀態
12         //鼠標滑入改變對應圖片寬度800 其餘圖片(兄弟)改成100
13         lis.mouseenter(function(){
14             // console.log(this);  當前的li DOM元素
15             //當前的圖片的寬度變爲800
16             $(this).stop().animate({width: 800});
17             //其餘圖片的寬度變爲100
18             $(this).siblings('li').stop().animate({width: 100});
19         });
20         //3鼠標滑出是所有顯示爲收縮狀態
21         lis.mouseout(function(){
22             lis.stop().animate({width: 240});
23         });
24     })
25 </script>

　　"推拉門"實現方法二：改變圖片的偏移值

　　html+css代碼ide

 1 <body>
 2     <div class="picList">
 3         <ul>
 4             <li>![](images/slidepic8.jpg)</li>
 5             <li>![](images/slidepic3.jpg)</li>
 6             <li>![](images/slidepic4.jpg)</li>
 7             <li>![](images/slidepic5.jpg)</li>
 8             <li>![](images/slidepic7.jpg)</li>
 9         </ul>
10     </div>
11 </body>
12 
13 <style>
14         *{
15             background-color: #aaa;
16             padding: 0;
17             margin: 0;
18         }
19         ul{list-style: none;}
20 
21         .picList{
22             width: 1000px;
23             height: 400px;
24             /*border:1px solid #eee;*/
25             margin:100px auto;
26             position: relative;
27             overflow: hidden;
28         }
29         /*設置定位屬性 全部圖片覆蓋在起始位置*/
30         .picList ul li{
31             position: absolute;
32             width: 1000px;
33             height: 400px;
34             top: 0;
35         }
36         img{
37             width: 100%;
38             height: 400px;
39             cursor: pointer;
40 
41         }
42 </style>

　　jQuery實現函數

 1 <script src = 'jquery-3.2.1.js'></script>
 2 <script >
 3     $(function(){
 4         //1獲取全部的圖片  設置初始的收縮狀態left:i*200
 5         var lis = $('li');
 6         for(var i = 0; i < lis.length; i++){
 7             lis.eq(i).css({left:i*200 + 'px' });
 8         }
 9         //2.設置hover內置函數,實現鼠標滑入展開滑出收縮效果
10         lis.hover(function(){
11             var index = $(this).index(); //DOM對象轉換jQuery對象
12             //2.1鼠標滑入後,當前圖片的前面圖片偏移位置減少到 j*100位置
13             for(var j = 0; j <= index; j++){
14                 lis.eq(j).stop().animate({left: j*100 + 'px'},300);
15             }
16             //2.2鼠標滑入後,當前圖片的後面圖片偏移位置擴大到 500+j*100位置
17             for(var j = index + 1; j < lis.length; j++){
18                 lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
19             }
20         },function(){ //2.3鼠標滑出後,全部圖片恢復到原來的位置 i*200
21             for(var i = 0; i < lis.length; i++){
22                 lis.eq(i).stop().animate({left: i*200 + 'px'},300);
23             }
24         });
25     })
26 </script>

　　注意：方法一在實現的過程當中，注意寬度和圖片命名的設置。
　　提示：這裏使用的是jQuery代碼實現，javaScript代碼也是同樣的能夠實現，只是修改下遍歷過程和內置函數方法，另外再重寫動畫函數（前面的筆記有封裝好的animate函數，能夠直接引入使用）。post

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。