Rumah  >  Artikel  >  hujung hadapan web  >  Capai kemahiran jquery akordion effect_javascript dengan mudah

Capai kemahiran jquery akordion effect_javascript dengan mudah

WBOY
WBOYasal
2016-05-16 15:19:451035semak imbas

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> 

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

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); 
      }); 
       
    }); 
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn