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

 

　　　　　　　　

　　　　　　　　　　　　　　　　　　　　　　　　　　　　推拉门收缩状态.png

　　　　　　

 

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"推拉门"展开状态.png

 

 

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

　　html+css代码

1  2     
     
       3         
      
        4             
        5             
       
 6             
       
 7             
       
 8             
       
 9             
       
10         
      
11     
     
12 13 14 

　　jQuery实现

 

1  2 

 

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

 

　　html+css代码

1  2     
     
       3         
      
        4             
       
![](images/slidepic8.jpg)
 5             
       
![](images/slidepic3.jpg)
 6             
       
![](images/slidepic4.jpg)
 7             
       
![](images/slidepic5.jpg)
 8             
       
![](images/slidepic7.jpg)
 9         
      
10     
     
11 12 13 

　　jQuery实现

1  2 

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

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