ในรหัสมากกว่าสิบบรรทัดรหัสการกลิ้งที่ยอดเยี่ยมจะได้รับการรับรู้ ดูเอฟเฟกต์!
โครงสร้าง HTML:
การคัดลอกรหัสมีดังนี้:
<ul>
<li> <img src = "images/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "#"> <span> 3 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>
<li> <img src = "images/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>
<li> <img src = "images/11.jpg"/> <a href = "#"> <pan> 6 </span> </a> </li>
<li> <img src = "images/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>
<li> <img src = "images/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>
</ul>
รหัส CSS:
การคัดลอกรหัสมีดังนี้:
*{มาร์จิ้น: 0;
. ลิสต์ {ความกว้าง: 640px;
LIS LIS {Float: ความกว้าง: 150px;
LIS LI IMG {Float: ซ้าย;
LIS LIS A {ตำแหน่ง: ความสูง; : 80px;
รหัส JQ (โปรดทราบว่าคุณต้องแนะนำไลบรารี JQ):
การคัดลอกรหัสมีดังนี้:
$ (function () {
$ ('. list li'). hover (function () {
$ (นี่). เด็ก ('a, img'). หยุด ();
$ (นี่) .children ('img'). หยุด (). animate ({'margintop': 40, 'ความสูง': 0}, 200, function () {
$ (นี่) .siblings ('a'). stop (). animate ({'ความสูง': 80, 'Margintop': 0}, 200);
-
}, การทำงาน () {
$ (นี่). เด็ก ('a, img'). หยุด ();
$ (นี่) ..children ('a'). stop (). animate ({'ความสูง': 0, 'Margintop': 40}, 200, function () {
$ (นี่) .siblings ('img'). stop (). animate ({'margintop': 0, 'ความสูง': 80}, 200);
-
-
-
มันไม่ใช่ประโยคง่ายๆของรหัส JQ หรือไม่? ที่รักคุณอาจคัดลอกและดูเอฟเฟกต์!