Dans un peu plus de dix lignes de code, un code de roulement d'image est réalisé. Voir l'effet!
Structure HTML:
La copie de code est la suivante:
<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 = "#"> <span> 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>
Code CSS:
La copie de code est la suivante:
* {marge: 0;
.List {largeur: 640px;
.LICE LI {Float: Left;
.List li img {float: gauche;
.LICE LI A {Position: Absolue; : 80px;
JQ Code (notez que vous devez introduire la bibliothèque JQ):
La copie de code est la suivante:
$ (function () {
$ ('. list li'). hover (function () {
$ (this) .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);
});
}, fonction () {
$ (this) .children ('a, img'). stop ();
$ (this) .children ('a'). stop (). animate ({'height': 0, 'margintop': 40}, 200, function () {
$ (this) .sibllings ('img'). stop (). animate ({'margintop': 0, 'height': 80}, 200);
});
});
});
N'est-ce pas quelques phrases simples de code JQ? Cher, vous pourriez aussi bien le copier et voir l'effet!