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

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

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

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

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

推拉门收缩状态.png

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

"推拉门"展开状态.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实现图片手风琴效果的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


网站栏目:JS实现图片手风琴效果的方法
本文链接:http://ybzwz.com/article/jpsige.html