超炫的jquery仿flash导航栏特效 - Web前端

作者：98wpeu发布时间：2026-06-04分类：网页前端技术浏览：63

导读：FLASH导航现在基本上已经是过时了，但是我们可以用JQuery来实现flash效果，非常的不错。演示地址：http://demo.jb51.net/js/2014/jqeryfa...

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

演示地址：http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html

复制代码代码如下:
<html>
<head>
    <metahttp-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;
}

代码很简单，使用也很简单，就包括修改都简单，小伙伴们自己看着办吧

标签：超炫特效 Web flash jquery

上一篇：ie8模式下click无反应点击option无反应的解决方法 - Web前端
下一篇：jQuery提示效果代码分享 - Web前端

超炫的jquery仿flash导航栏特效 - Web前端

相关推荐