JS实现图片手风琴效果

''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。

推拉门收缩状态.png

"推拉门"展开状态.png

"推拉门"实现方法一：改变图片宽度

html+css代码

 
 

  
  

  

  

  

  

 
 



 *{
  padding: 0;
  margin: 0;

 }
 .box{
  
  
  width: 1200px;
  height: 500px;
  border:1px solid red;
  margin: 50px auto;
 }
 .box ul{
  list-style: none;
  width: 1210px;
 }
 
 .box ul li{
  width: 240px;
  height: 500px;
  
  float: left;
 }
 

jQuery实现 

"推拉门"实现方法二：改变图片的偏移值

html+css代码

 
 

  
![](images/slidepic8.jpg)
  
![](images/slidepic3.jpg)
  
![](images/slidepic4.jpg)
  
![](images/slidepic5.jpg)
  
![](images/slidepic7.jpg)
 
 



 *{
  background-color: #aaa;
  padding: 0;
  margin: 0;
 }
 ul{list-style: none;}

 .picList{
  width: 1000px;
  height: 400px;
  
  margin:100px auto;
  position: relative;
  overflow: hidden;
 }
 
 .picList ul li{
  position: absolute;
  width: 1000px;
  height: 400px;
  top: 0;
 }
 img{
  width: 100%;
  height: 400px;
  cursor: pointer;

 }

jQuery实现

注意：方法一在实现的过程中，注意宽度和图片命名的设置。

提示：这里使用的是jQuery代码实现，javascript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数（前面的笔记有封装好的animate函数，可以直接引入使用）。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。