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实现图片手风琴效果的方法有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。
网站栏目:JS实现图片手风琴效果的方法
文章网址:http://pwwzsj.com/article/jpsige.html