超炫的jquery仿flash導覽列特效_jquery

FLASH導航現在基本上已經是過時了，但是我們可以用jQuery來實現flash效果，非常的好。

示範網址：http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

複製程式碼 程式碼如下:

 
 
     
     
     
     
     
 
 
       

 
       

 
           

 
            測試 
       

 
       

 
           

 
            測試 
       

 
       

 
           

 
            測試 
       

 
       

 
           

 
            測試 
       

 
       

 
           

 
            測試 
       

 
       

 
           

 
            測試 
       

 
       

 
 
 

 

複製程式碼 程式碼如下:

$(document).ready(function(){ 
    $(".menu").mouseover(function(){ 
        var div = $(this).children(".menu_b"); 
        var span = $(this).children("span"); 
        //隱藏字體，且向右移動20px 
        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"); 
        //隱藏字體，且向左移動20px 
        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'}); 
    }); 
}); 

 動畫效果是我依照自己的喜好來寫的，喜歡的可以自己改變特效。 。

複製程式碼 程式碼如下:

/* demo01 css */ 
#main{ 
    background: #EEE; 
    display: inline-block; 
    padding: 10px; 
} 
.menu{position: relative; 
    width: 100px; 
    height: 40px; 
    margin: 10px auto; 
} 
 
.menu_b{ 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    background: red; 
    z-index: 1px; 
    top: 50%; 
    left: 50%; 
} 
.menu span{ 
    position: inherit; 
    display: block; 
    text-align: center; 
    line-height: 40px; 
    z-index: 3px; 
    font-size: 14px; 
    font-family: "Microsoft Yahei"; 
    color: #777; 
    cursor: pointer; 
} 
.back1{ 
    background: #FF0000; 
} 
.back2{ 
    background: #921AFF; 
} 
.back3{ 
    background: #00CACA; 
} 
.back4{ 
    background: #00DB00; 
} 
.back5{ 
    background: #FF5809; 
} 
.back6{ 
    background: #E1E100; 
} 

程式碼很簡單，使用也很簡單，就包含修改都簡單，小夥伴們自己看著辦吧