見事な jquery 風のフラッシュ ナビゲーション バー Effects_jquery

FLASH ナビゲーションは基本的に時代遅れですが、jQuery を使用して Flash 効果を実現でき、これは非常に優れています。

デモのアドレス: http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

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

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  & Lt; スパン & gt; / スパン & gt;                                                                                                                                                                                                                                                                                                                                     & Lt; スパン & gt; / スパン & gt;                                                                                                                                                                                                                                                                                                                               & Lt; スパン & gt; / スパン & gt;                                                                                                                                                                                                                                                                                                                               & Lt; スパン & gt; テスト & lt;/スパン & gt;                                                                                                                                                                                    








コードをコピー


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

$(document).ready(function(){
$(".menu").mouseover(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//フォントを非表示にし、右に 20 ピクセル移動します
span.stop(true,false).animate({opacity:'0',left:'20px'},200); //背景アニメーションを表示
div.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300); div.animate({height:'40px',marginTop:'-20px',opacity:'1'},300); // フォントを表示、左に 20px 移動
span.animate({opacity:'1',left:'0px'},300); span.css({color:'#FFF'}); });

$(".menu").mouseout(function(){
var div = $(this).children(".menu_b");
var span = $(this).children("span");
//フォントを非表示にし、左に 20 ピクセル移動します
span.stop(true,false).animate({opacity:'0',left:'20px'},200); //背景アニメーションを表示
div.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300); div.animate({width:'0px',marginLeft:'0px',opacity:'1'},300); // フォントを表示、右に 20px 移動
span.animate({opacity:'1',left:'0px'},300); span.css({color:'#777'}); });
});



アニメーション効果は私自身の好みに従って書きました。必要に応じて特殊効果を自分で変更できます。 。





コードをコピーします

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

/* デモ01 css */

#メイン{ 背景: #EEE; 表示: インラインブロック パディング: 10px; } .menu{位置: 相対; 幅: 100px; 高さ: 40px; マージン: 10px 自動 } .menu_b{

位置: 絶対; 幅: 0px; 高さ: 0px; 背景: 赤

z インデックス: 1px; トップ: 50%; 左: 50%; }
.menu スパン{
位置: 継承
表示: ブロック
テキストの配置: 中央;
行の高さ: 40px; z インデックス: 3px; フォントサイズ: 14px; フォントファミリー: "Microsoft Yahei"
; カラー: #777; カーソル: ポインタ
}
.back1{
背景: #FF0000; }
.back2{
背景: #921AFF; }
.back3{
背景: #00CACA; }
.back4{
背景: #00DB00; }
.back5{
背景: #FF5809; }
.back6{
背景: #E1E100; }



コードは非常にシンプルで、変更も含めて使用するのも非常に簡単です。