Heim > Web-Frontend > js-Tutorial > Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse

Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse

WBOY
Freigeben: 2016-05-16 15:19:45
Original
1059 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.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage