Em pouco mais de dez linhas de código, é realizado um código legal de rolagem. Veja o efeito!
Estrutura HTML:
A cópia do código é a seguinte:
<ul>
<li> <img src = "imagens/10.jpg"/> <a href = "#"> <pan> 1 </span> </a> </li>
<li> <img src = "imagens/11.jpg"/> <a href = "#"> <pan> 2 </span> </a> </li>
<li> <img src = "imagens/12.jpg"/> <a href = "#"> <pan> 3 </span> </a> </li>
<li> <img src = "imagens/13.jpg"/> <a href = "#"> <pan> 4 </span> </a> </li>
<li> <img src = "imagens/10.jpg"/> <a href = "#"> <pan> 5 </span> </a> </li>
<li> <img src = "imagens/11.jpg"/> <a href = "#"> <pan> 6 </span> </a> </li>
<li> <img src = "imagens/12.jpg"/> <a href = "#"> <pan> 7 </span> </a> </li>
<li> <img src = "imagens/13.jpg"/> <a href = "#"> <pan> 8 </span> </a> </li>
</ul>
Código CSS:
A cópia do código é a seguinte:
*{margem: 0;
.List {Width: 640px;
.List Li {FLOAT: LIDADE DE ESTRADA: 150px;
.List Li img {float: Esquerda;
.List Li A {Posição: Absoluto; : 80px;
Código JQ (observe que você precisa apresentar a biblioteca JQ):
A cópia do código é a seguinte:
$ (function () {
$ ('. List Li'). Hover (function () {
$ (this) .Children ('A, img'). Stop ();
$ (this) .Children ('img'). Stop (). Animate ({'margintop': 40, 'altura': 0}, 200, function () {
$ (this) .Siblings ('a'). Stop (). Animate ({'altura': 80, 'margintop': 0}, 200);
});
}, function () {
$ (this) .Children ('A, img'). Stop ();
$ (this) .Children ('A'). Stop (). Animate ({'Height': 0, 'Margintop': 40}, 200, function () {
$ (this) .Siblings ('img'). Stop (). Animate ({'margintop': 0, 'altura': 80}, 200);
});
});
});
Não são algumas frases simples do código JQ? Caro, você também pode copiá -lo e ver o efeito!