suchen

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

Erlernen Sie ganz einfach JQuery-Akkordeon-Effekt_Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:19:451037Durchsuche

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>

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

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

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

Stellungnahme：
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
Vorheriger Artikel：Das jQuery-Plug-in imgPreviewQs implementiert die hochgeladene Bildvorschau_jqueryNächster Artikel：Das jQuery-Plug-in imgPreviewQs implementiert die hochgeladene Bildvorschau_jquery

In Verbindung stehende Artikel

Mehr sehen