JS实现图片手风琴效果的方法

这篇文章主要讲解了JS实现图片手风琴效果的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

创新互联建站是专业的黎平网站建设公司，黎平接单;提供成都网站建设、网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行黎平网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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

推拉门收缩状态.png

"推拉门"展开状态.png

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

html+css代码

jQuery实现 

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

html+css代码

 

 

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

jQuery实现

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

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

看完上述内容，是不是对JS实现图片手风琴效果的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。