jquery アコーディオン効果_javascript スキルを簡単に習得-jsチュートリアル-php.cn

jquery アコーディオン効果_javascript スキルを簡単に習得

WBOY

リリース： 2016-05-16 15:19:45

オリジナル

1062 人が閲覧しました

これから説明する JQuery アニメーションの特殊効果はアコーディオンです。早速、最終的なレンダリングを見てみましょう。

1. 実装原則の分析

対応するステレオグラム:

2. HTML コード分析

<body> 
  <div id="container"> 
    <ul id="content"> 
      <li class="first"> 
        <h3>真</h3> 
        <div><img src="images/0.jpg"/></div> 
      </li> 
      <li class="second"> 
        <h3>的</h3> 
        <div><img src="images/1.jpg"/></div> 
      </li> 
      <li class="third"> 
        <h3>爱</h3> 
        <div><img src="images/2.jpg"/></div> 
      </li> 
      <li class="forth"> 
        <h3>你</h3> 
        <div><img src="images/4.jpg"/></div> 
      </li> 
    </ul> 
  </div> 
</body>

ログイン後にコピー

1. コンテナの ID を持つ div は、上記の分析の赤い領域です。
2. コンテンツの ID を持つ ul は、すべての li を格納するために使用されます。

3. 各リーは、赤い領域と対応する画像の組み合わせです。

3. CSS コード分析

*{margin: 0; padding: 0;} 
 
    img{ 
      border:0; 
    } 
 
    #container 
    { 
      width:680px; 
      height: 300px; 
      margin: 100px auto; 
      position: relative; 
      border:3px solid red; 
      overflow: hidden; 
    } 
 
    #container #content 
    { 
      list-style: none; 
    } 
 
    #container #content li{ 
      width:590px; 
      height:300px; 
      position: absolute; 
    } 
 
    #container #content li.second{ 
      left:590px; 
    } 
 
    #container #content li.third{ 
      left:620px; 
    } 
 
    #container #content li.forth{ 
      left:650px; 
    } 
 
    #container #content li h3{ 
      float:left; 
      width: 24px; 
      height:294px; 
      border:3px solid blue; 
      background-color: yellow; 
      cursor: pointer; 
    } 
 
    #container #content li div{ 
      float: left; 
      width: 560px; 
      height:300px; 
    }

ログイン後にコピー

1. * タグと img タグは、システムのデフォルトのギャップやその他の効果を削除するために使用されます。
2. #container は上で分析した可視領域であるため、そのサイズは 680 * 300 であり、すべての子要素のコンテナーであるため、相対的に配置されます (position:relative)。

3. #container #content は、ul のデフォルトの小さなドット効果を削除します。

4. すべての li は絶対配置され、そのサイズは 590 * 300 です。次に、次の li の左の値を設定し、li の h3 (黄色の領域) 属性を float に設定します。

上記の CSS スタイルをすべて設定すると、最終的な効果が分析画像の効果になります。

4. JQuery コード分析

アコーディオンの JS インタラクティブコードは実際には非常に単純で、li の絶対位置に対応する左の値をリアルタイムで変更するだけです。コードは次のとおりです。

$(function(){ 
 
      $("#container #content li.first h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":590}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.second h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":620}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.third h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":650}, 1000); 
      }); 
 
      $("#container #content li.forth h3").mouseenter(function(){ 
        $("#container #content li.second").stop().animate({"left":30}, 1000); 
        $("#container #content li.third").stop().animate({"left":60}, 1000); 
        $("#container #content li.forth").stop().animate({"left":90}, 1000); 
      }); 
       
    });

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。