超炫的jquery仿flash导航栏特效

200 阅读 0 评论 132 点赞

我是靠谱客的博主娇气路灯，最近开发中收集的这篇文章主要介绍超炫的jquery仿flash导航栏特效，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

FLASH导航现在基本上已经是过时了，但是我们可以用jQuery来实现flash效果，非常的不错。

演示地址：http://demo.uoften.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;  

}