''推拉门''动效也可以称作"手风琴"效果，大多数效果实现的思路基本是一样的，下面介绍两种方法，一种是通过改变图片的偏移位置实现移动，另一种是通过遍历背景图片后改变图片的宽度实现变换。本文两种方法实现''推拉门''动画效果也可以称作是手风琴效果，具体实现方法大家通过本文一起学习吧，希望能版助到大家。
实现方法一：改变图片宽度
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代码
- 
- 
- 
- 
- 
jQuery实现
注意：方法一在实现的过程中，注意宽度和图片命名的设置。
提示：这里使用的是jQuery代码实现，javaScript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数（前面的笔记有封装好的animate函数，可以直接引入使用）。
相关推荐：
