图片''推拉门''动效实现

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

收缩状态.png

展开状态.png

实现方法一：改变图片宽度

html+css代码

jQuery实现

jQuery精简后代码

//精简代码
$(function(){
    $('li').each(function(index, element){
        $(element).css('backgroud',"url('images/slidepic"+(index + 2)+.jpg')");
    }).mouseenter(function(){
        $(this).stop().animate({width: 800}).siblings().stop().aniamte(width: 100});
    }).mouseout(function(){
        $('li').stop().animate({width: 240});
    });
})

实现方法二：改变图片的偏移值

html+css代码

    

        

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

jQuery实现

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

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