Прямо более десяти строк кода реализуют прохладный код картинки. Посмотрите на эффект!
Структура HTML:
Кода -копия выглядит следующим образом:
<ul>
<li> <img src = "Images/10.jpg"/> <a href = "#"> <pan> 1 </span> </a> </li>
<li> <img src = "Images/11.jpg"/> <a href = "#"> <pan> 2 </span> </a> </li>
<li> <img src = "Images/12.jpg"/> <a href = "#"> <pan> 3 </span> </a> </li>
<li> <img src = "Images/13.jpg"/> <a href = "#"> <pan> 4 </span> </a> </li>
<li> <img src = "Images/10.jpg"/> <a href = "#"> <pan> 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 = "#"> <pan> 7 </span> </a> </li>
<li> <img src = "Images/13.jpg"/> <a href = "#"> <pan> 8 </span> </a> </li>
</ul>
CSS -код:
Кода -копия выглядит следующим образом:
*{Margin: 0;
.list {ширина: 640px;
.LIST LI {Float;
.LIST LI IMG {Float: Left;
. ПИСЬМО : 80px;
JQ Code (обратите внимание, что вам нужно представить библиотеку JQ):
Кода -копия выглядит следующим образом:
$ (function () {
$ ('. Список 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);
});
}, function () {
$ (this). Children ('a, img'). Stop ();
$ (this) .children ('a'). Stop (). Animate ({'height': 0, 'margintop': 40}, 200, function () {
$ (this) .siblings ('img'). Stop (). Animate ({'margintop': 0, 'высота': 80}, 200);
});
});
});
Разве это не несколько простых предложений кода JQ? Уважаемый, вы могли бы также скопировать его и увидеть эффект!