In etwas mehr als zehn Code wird ein cooler Bild -Roll -Code realisiert. Sehen Sie den Effekt!
HTML -Struktur:
Die Codekopie lautet wie folgt:
<ul>
<li> <img src = "bilder/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>>
<li> <img src = "Bilder/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>>
<li> <img src = "Bilder/12.jpg"/> <a href = "#"> <span> 3 </span> </a> </li>>
<li> <img src = "Bilder/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>>
<li> <img src = "bilder/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>>
<li> <img src = "Bilder/11.jpg"/> <a href = "#"> <span> 6 </span> </a> </li>>
<li> <img src = "Bilder/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>>
<li> <img src = "Bilder/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>>
</ul>
CSS -Code:
Die Codekopie lautet wie folgt:
*{Margin: 0;
.List {Breite: 640px;
.List li {float: 150px;
.List li img {float: links;
.List : 80px;
JQ -Code (Beachten Sie, dass Sie die JQ -Bibliothek vorstellen müssen):
Die Codekopie lautet wie folgt:
$ (function () {
$ ('. LIST li'). Hover (function () {
$ (this) .Children ('a, img'). Stop ();
$ (this) .Children ('img'). Stop (). Animate ({'margintop': 40, 'Höhe': 0}, 200, function () {
$ (this) .sillings ('a'). Stop (). Animate ({'Höhe': 80, 'margintop': 0}, 200);
});
}, function () {
$ (this) .Children ('a, img'). Stop ();
$ (this) .Children ('a'). Stop (). Animate ({'Höhe': 0, 'margintop': 40}, 200, function () {
$ (this) .sillings ('img'). Stop (). Animate ({'margintop': 0, 'Höhe': 80}, 200);
});
});
});
Ist es nicht ein paar einfache Sätze von JQ Code? Lieber, Sie könnten es genauso gut kopieren und den Effekt sehen!