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

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

html+css代码

jQuery实现

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

html+css代码

jQuery实现

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

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

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