JS實現拉門動效

這次帶給大家JS實現拉門動效，JS實現推拉門動效的注意事項有哪些，下面就是實戰案例，一起來看一下。

"拉門"實作方法一：改變圖片寬度

html css程式碼

 <p>
  </p>

       
•    
•    
•    
•    
•   

 

jQuery實作 

<script></script>
<script>
 $(function(){
  //1遍历每一张li 获取每个元素设置对应的图片
  var lis = $(&#39;li&#39;);
  lis.each(function(index, element){
   //通过设置背景图片名称改变图片的显示
   var imgName = "images/slidepic" + (index + 2) +".jpg ";
   $(element).css(&#39;background&#39;, "url(&#39;"+ imgName +"&#39;)")
  });
  //2.展开状态
  //鼠标滑入改变对应图片宽度800 其他图片(兄弟)改为100
  lis.mouseenter(function(){
   // console.log(this); 当前的li DOM元素
   //当前的图片的宽度变为800
   $(this).stop().animate({width: 800});
   //其他图片的宽度变为100
   $(this).siblings(&#39;li&#39;).stop().animate({width: 100});
  });
  //3鼠标滑出是全部显示为收缩状态
  lis.mouseout(function(){
   lis.stop().animate({width: 240});
  });
 })
</script>

# "拉門"實作方法二：改變圖片的偏移值

html css程式碼

 <p>
  </p>

   
• 
   
• 
   
• 
   
• 
   
• 
  

 

jQuery實作

<script></script>
<script>
 $(function(){
  //1获取所有的图片 设置初始的收缩状态left:i*200
  var lis = $(&#39;li&#39;);
  for(var i = 0; i < lis.length; i++){
   lis.eq(i).css({left:i*200 + &#39;px&#39; });
  }
  //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 + &#39;px&#39;},300);
   }
   //2.2鼠标滑入后,当前图片的后面图片偏移位置扩大到 500+j*100位置
   for(var j = index + 1; j < lis.length; j++){
    lis.eq(j).stop().animate({left: 500+j*100 + &#39;px&#39;},300);
   }
  },function(){ //2.3鼠标滑出后,所有图片恢复到原来的位置 i*200
   for(var i = 0; i < lis.length; i++){
    lis.eq(i).stop().animate({left: i*200 + &#39;px&#39;},300);
   }
  });
 })
</script>

  注意：方法一在實作的過程中，注意寬度和圖片命名的設定。

提示：這裡使用的是jQuery程式碼實現，javaScript程式碼也是一樣的可以實現，只是修改下遍歷過程和內建函數方法，另外再重寫動畫函數（前面的筆記有封裝好的animate函數，可以直接引入使用） 。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是JS實現拉門動效的詳細內容。更多資訊請關注PHP中文網其他相關文章！