jQuery_jquery で実装された Flash 風のメニュー効果コード

まず効果を見てみましょう: 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 コード:

コードをコピー

コードは次のとおりです: $(function () { var fadeSpeed = ($.browser.safari ? 600 : 450); $('#logotype').append('' ); $(' .hover').css('opacity', 0); $('.hover').parent().hover(function() { $('.hover', this).stop() .animate({ 'opacity': 1 }, fadeSpeed) }, function() { $('.hover', this).stop().animate({ 'opacity': 0 }, fadeSpeed) }); ; $(function( ) { var fadeSpeed = ($.browser.safari ? 600 : 450); $('#logotype').append('' ); $('.hover').css('opacity', 0);

$('.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 のようなメニュー効果