JS实现图片''推拉门''效果

JS实现图片''推拉门''效果

 

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

 

        JS实现图片''推拉门''效果_第1张图片

                            推拉门收缩状态.png

      JS实现图片''推拉门''效果_第2张图片

 

                             "推拉门"展开状态.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函数,可以直接引入使用)。

你可能感兴趣的:(JS实现图片''推拉门''效果)