Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse-js-Tutorial-php.cn

Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:19:45

Original

1062 Leute haben es durchsucht

Der Spezialeffekt der JQuery-Animation, den ich Ihnen erklären werde, ist das Akkordeon. Schauen wir uns zunächst das endgültige Rendering an.

1. Analyse der Umsetzungsprinzipien

Entsprechendes Stereogramm:

2. HTML-Code-Analyse

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

Nach dem Login kopieren

1. Das Div mit der ID des Containers ist der rote Bereich in der obigen Analyse.
2. Die UL mit der Inhalts-ID wird zum Speichern aller LI verwendet.

3. Jedes Li ist eine Kombination aus einem roten Bereich und dem entsprechenden Bild.

3. CSS-Code-Analyse

*{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; 
    }

Nach dem Login kopieren

1. *- und img-Tags werden verwendet, um Systemstandardlücken und andere Effekte zu entfernen.
2. #container ist der oben analysierte sichtbare Bereich, daher beträgt seine Größe 680 * 300, und er ist der Container aller untergeordneten Elemente, sodass er relativ positioniert ist (Position: relativ).

3. #container #content dient dazu, den standardmäßigen kleinen Punkteffekt von ul zu entfernen.

4. Alle Li sind absolut positioniert und ihre Größe beträgt 590 * 300. Legen Sie dann den linken Wert des folgenden Li fest und setzen Sie das Attribut h3 (gelber Bereich) des Li auf Float.

Nachdem alle oben genannten CSS-Stile festgelegt wurden, ist der endgültige Effekt der Effekt im Analysebild.

4. JQuery-Code-Analyse

Der interaktive js-Code des Akkordeons ist eigentlich sehr einfach. Er muss lediglich den linken Wert entsprechend der absoluten Position von li ändern. Der Code lautet wie folgt:

$(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); 
      }); 
       
    });

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.