jq はクールなマウスオーバー画像スクロール効果を実装します。

わずか 10 行のコードで、この効果を実現するのは難しくありません。これ以上説明する必要はありません。コードを直接見てみましょう。効果！

html 構造:

コードをコピー コードは次のとおりです:

• 1


• ;2


• 3


• ;< a href="#">


• 5


• 6


• 7

li>8

CSS コード:

コードをコピーコードは次のとおりです。 ;}

. リスト li{ フロート: 左; 幅: 150 ピクセル; リスト スタイル: なし; 位置: 相対; } img{ フロート: 左; 幅: 80 ピクセル; ボーダー: なし; } 999; マージントップ: 40px; テキスト整列: 中央; 色: #fff; }

コード (jq ライブラリを導入するためのメモ):

コードをコピー

コードは次のとおりです: $(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);

}, function () {
$(this). Children('a,img').stop();
$(this).children('a').stop().animate({ 'height': 0, 'marginTop': 40 }, 200, function () {
$(this).siblings('img').stop().animate({ 'marginTop': 0, 'height': 80 }, 200); ;
});


それは単なる JQ コードですか?親愛なる、あなたもそれをコピーして、その効果を確認してみてはいかがでしょうか。