基于jQuery实现图片推拉门动画效果的两种方法

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

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

html+css代码

  
    

      
      

      

      

      

      

    
  


    *{
      padding: 0;
      margin: 0;
    }
    .box{
      
      
      width: 1200px;
      height: 500px;
      border:1px solid red;
      margin: 50px auto;
    }
    .box ul{
      list-style: none;
      width: 1210px;
    }
    
    .box ul li{
      width: 240px;
      height: 500px;
      
      float: left;
    }
  

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)
    
  


    *{
      background-color: #aaa;
      padding: 0;
      margin: 0;
    }
    ul{list-style: none;}
    .picList{
      width: 1000px;
      height: 400px;
      
      margin:100px auto;
      position: relative;
      overflow: hidden;
    }
    
    .picList ul li{
      position: absolute;
      width: 1000px;
      height: 400px;
      top: 0;
    }
    img{
      width: 100%;
      height: 400px;
      cursor: pointer;
    }

jQuery实现

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

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

总结

以上所述是小编给大家介绍的基于jQuery实现图片推拉门动画效果的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！