まず効果を見てみましょう: http://demo.jb51.net/js/jquery_flash/demo.htm
次のメニューは上記と同じ実装原理を持っているためです。簡略化するためのロゴ 安全のため、ここでは原理を説明するためにロゴ部分のコードのみを使用します:
HTML コード:
CSS コード:
a#logotype{ 背景: url(logotype .jpg) 左上; 位置: 相対; 幅: 119px; :none} a#logotype .hover { 背景: url(logotype.jpg) なし - 左下; 位置: 0; 左: 0; 幅: 119 ピクセル;ロゴタイプ{
背景: url(logotype.jpg) 繰り返しなし;
表示: 相対;
高さ: 70px;
}
a#logotype span{display:none}
a# logotype .hover {
background: url(logotype.jpg) no-repeat 左下;
display: block;絶対;
上: 0;
高さ: 70px;
}
があります。 hover クラスはここにありますが、html にはありません。心配しないでください。これは最後にあり、js で使用されます。
JS コード:
コードをコピー
$('.hover').parent().hover(function()
$('. hover', this).stop().animate({
'opacity': 1
},
fadeSpeed)
},
function() {
$('.hover', this).stop().animate({
'opacity': 0
},
fadeSpeed)
});
この JS は、このエフェクトの実装原理を明確に説明しています。まず、リンク内にクラス hover を持つスパンを作成します (このスパンは、マウスがリンク上に置かれたときの実際のエフェクトです) )、透明度を 0 に設定し、マウスが接続上に移動すると、スパンの透明度が徐々に 1 に調整され、上記のスパンが a のデフォルトの効果を上書きして、アニメーション効果を実現します。
jQuery に基づく Flash のようなメニュー効果