ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery_jquery で実装された Flash 風のメニュー効果コード

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

WBOY
WBOYオリジナル
2016-05-16 18:27:011164ブラウズ

まず効果を見てみましょう: 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 のようなメニュー効果
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。