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});
  });
})

  
    

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

jQuery实现

  $(function(){
    //1获取所有的图片 设置初始的收缩状态left:i*200
    var lis = $('li');
    for(var i = 0; i < lis.length; i++){
      lis.eq(i).css({left:i*200 + 'px' });
    }
    //2.设置hover内置函数,实现鼠标滑入展开滑出收缩效果
    lis.hover(function(){
      var index = $(this).index(); //DOM对象转换jQuery对象
      //2.1鼠标滑入后,当前图片的前面图片偏移位置减小到 j*100位置
      for(var j = 0; j <= index; j++){
        lis.eq(j).stop().animate({left: j*100 + 'px'},300);
      }
      //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
      for(var j = index + 1; j < lis.length; j++){
        lis.eq(j).stop().animate({left: 500+j*100 + 'px'},300);
      }
    },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
      for(var i = 0; i < lis.length; i++){
        lis.eq(i).stop().animate({left: i*200 + 'px'},300);
      }
    });
  })

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

提示：这里使用的是jQuery代码实现，javaScript代码也是一样的可以实现，只是修改下遍历过程和内置函数方法，另外再重写动画函数。

感谢你能够认真阅读完这篇文章，希望小编分享的“jQuery如何实现图片推拉门动画效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!