Capai kemahiran jquery akordion effect_javascript dengan mudah-tutorial js-php.cn

Capai kemahiran jquery akordion effect_javascript dengan mudah

WBOY

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

asal

1061 orang telah melayarinya

Kesan khas animasi JQuery yang akan saya jelaskan kepada anda ialah akordion.

1. Analisis prinsip pelaksanaan

Stereogram yang sepadan:

2. Analisis kod 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>

Salin selepas log masuk

1. Div dengan id bekas ialah kawasan merah dalam analisis di atas.
2. Ul dengan id kandungan digunakan untuk menyimpan semua li.

3. Setiap li ialah gabungan kawasan merah dan gambar yang sepadan.

3. Analisis kod 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; 
    }

Salin selepas log masuk

1. * dan teg img digunakan untuk mengalih keluar jurang lalai sistem dan kesan lain.
2. #bekas ialah kawasan yang boleh dilihat yang dianalisis di atas, jadi saiznya ialah 680 * 300, dan ia adalah bekas semua elemen kanak-kanak, jadi ia berada pada kedudukan yang agak (kedudukan: relatif).

3. #container #content adalah untuk mengalih keluar kesan titik kecil lalai ul.

4. Semua li berada pada kedudukan mutlak, dan saiznya ialah 590 * 300, kemudian tetapkan nilai kiri li berikut dan tetapkan atribut h3 (kawasan kuning) li untuk terapung.

Selepas semua gaya css di atas ditetapkan, kesan akhir akan menjadi kesan dalam gambar analisis.

4. Analisis kod JQuery

Kod interaktif js akordion sebenarnya sangat mudah. Ia hanya perlu menukar nilai kiri yang sepadan dengan kedudukan mutlak li dalam masa nyata

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

Salin selepas log masuk

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.