Rumah > Artikel > hujung hadapan web > Capai kemahiran jquery akordion effect_javascript dengan mudah
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); }); });