JS realizes sliding door animation effect

This time I will bring you JS to realize the sliding door dynamic effect. What are the precautions for JS to realize the sliding door dynamic effect. The following is a practical case, let's take a look.

"Sliding door" implementation method one: change the picture width

html css code

 <p>
  </p>

       
•    
•    
•    
•    
•   

 

jQuery implementation

<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>

"Sliding door" implementation method two: change the offset value of the image

html css code

 <p>
  </p>

   
• 
   
• 
   
• 
   
• 
   
• 
  

 

jQuery implementation

<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>

NOTE: During the implementation of method 1, pay attention to the settings of width and image naming.

Tip: The jQuery code is used here, and the javaScript code can be implemented in the same way. Just modify the traversal process and built-in function methods, and rewrite the animation function (the previous notes have an encapsulated animate function, which can be directly introduced and used) .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of JS realizes sliding door animation effect. For more information, please follow other related articles on the PHP Chinese website!