Di lebih dari sepuluh baris kode, kode bergulir yang keren diwujudkan. Lihat efeknya!
Struktur HTML:
Salinan kode adalah sebagai berikut:
<ul>
<li> <img src = "gambar/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>
<li> <img src = "gambar/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>
<li> <img src = "gambar/12.jpg"/> <a href = "#"> <span> 3 </span> </a> </li>
<li> <img src = "gambar/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>
<li> <img src = "gambar/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>
<li> <img src = "gambar/11.jpg"/> <a href = "#"> <span> 6 </span> </a> </li>
<li> <img src = "gambar/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>
<li> <img src = "gambar/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>
</ul>
Kode CSS:
Salinan kode adalah sebagai berikut:
*{margin: 0;
.list {width: 640px;
.list Li {float: Width: 150px;
.list li img {float: left;
Li A {Posisi: Top: 0; : 80px;
Kode JQ (Perhatikan bahwa Anda perlu memperkenalkan Perpustakaan JQ):
Salinan kode adalah sebagai berikut:
$ (function () {
$ ('. Daftar li'). Hover (function () {
$ (ini) .Children ('a, img'). stop ();
$ (this) .children ('img'). stop (). animate ({'margintop': 40, 'height': 0}, 200, function () {
$ (this) .siblings ('a'). stop (). animate ({'height': 80, 'margintop': 0}, 200);
});
}, fungsi () {
$ (ini) .Children ('a, img'). stop ();
$ (ini) .children ('a'). stop (). animate ({'height': 0, 'margintop': 40}, 200, function () {
$ (this) .siblings ('img'). stop (). animate ({'margintop': 0, 'height': 80}, 200);
});
});
});
Bukankah itu beberapa kalimat sederhana dari kode JQ? Sayang, Anda mungkin juga menyalinnya dan melihat efeknya!