超炫的jquery仿flash導航欄特效

2019-11-20 13:56:12

字體：大中小

來源：轉載

供稿：網友

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

演示地址：http://demo.VeVB.COm/js/2014/jqeryfangflashdh/demo.html

<html>  
<head>  
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">  
    <title>demo01</title>  
    <link rel="stylesheet" type="text/css" href="demo.css">  
    <script type="text/javascript" src="jquery.js"></script>  
    <script type="text/javascript" src="demo.js"></script>  
</head>  
<body>  
        <div id="main">  
        <div class="menu">  
            <div class="menu_b back1"></div>  
            <span>測試</span>  
        </div>  
        <div class="menu">  
            <div class="menu_b back2"></div>  
            <span>測試</span>  
        </div>  
        <div class="menu">  
            <div class="menu_b back3"></div>  
            <span>測試</span>  
        </div>  
        <div class="menu">  
            <div class="menu_b back4"></div>  
            <span>測試</span>  
        </div>  
        <div class="menu">  
            <div class="menu_b back5"></div>  
            <span>測試</span>  
        </div>  
        <div class="menu">  
            <div class="menu_b back6"></div>  
            <span>測試</span>  
        </div>  
        </div>  
</body>  
</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;  
}  