En poco más de diez líneas de código, se realiza un código de rodadura genial. ¡Vea el efecto!
Estructura HTML:
La copia del código es la siguiente:
<ul>
<li> <img src = "imágenes/10.jpg"/> <a href = "#"> <span> 1 </span> </a> </li>
<li> <img src = "imágenes/11.jpg"/> <a href = "#"> <span> 2 </span> </a> </li>
<li> <img src = "imágenes/12.jpg"/> <a href = "#"> <span> 3 </span> </a> </li>
<li> <img src = "imágenes/13.jpg"/> <a href = "#"> <span> 4 </span> </a> </li>
<li> <img src = "imágenes/10.jpg"/> <a href = "#"> <span> 5 </span> </a> </li>
<li> <img src = "imágenes/11.jpg"/> <a href = "#"> <span> 6 </span> </a> </li>
<li> <img src = "imágenes/12.jpg"/> <a href = "#"> <span> 7 </span> </a> </li>
<li> <img src = "imágenes/13.jpg"/> <a href = "#"> <span> 8 </span> </a> </li>
</ul>
Código CSS:
La copia del código es la siguiente:
*{margen: 0;
.list {ancho: 640px;
LIST LI {FLOATO: Izquierda;
.list li img {float: izquierda;
. Li A {Posición: : 80px;
Código JQ (tenga en cuenta que necesita introducir la biblioteca JQ):
La copia del código es la siguiente:
$ (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 ({'altura': 80, 'Margintop': 0}, 200);
});
}, función () {
$ (this). Children ('a, img'). stop ();
$ (this) .children ('a'). stop (). Animate ({'altura': 0, 'Margintop': 40}, 200, function () {
$ (this) .siblings ('img'). stop (). Animate ({'Margintop': 0, 'Altura': 80}, 200);
});
});
});
¿No son algunas oraciones simples de código JQ? Querido, ¡también podrías copiarlo y ver el efecto!