JSで引き戸アニメーション効果を実現

今回は、引き戸のダイナミック効果を実現するための JS を紹介します。 JS を使用して引き戸のダイナミック エフェクトを実現するための 注意事項 は何ですか。以下は実際のケースです。

「引き戸」実装方法その1：絵の幅を変更する

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>

注: 方法 1 の実装中は、幅と画像名の設定に注意してください。

ヒント: ここでは jQuery コードが使用されており、JavaScript コードも同じ方法で実装できます。トラバーサル プロセスと組み込み関数のメソッドを変更し、アニメーション関数を書き直すだけです (前のノートにはカプセル化されたアニメーション関数が含まれています)。直接導入して使用することもできます）。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がJSで引き戸アニメーション効果を実現の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。