您好,欢迎访问一九零五行业门户网

超炫的jquery仿flash导航栏特效_jquery

flash导航现在基本上已经是过时了,但是我们可以用jquery来实现flash效果,非常的不错。
演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html
复制代码 代码如下:
demo01
测试
测试
测试
测试
测试
测试
复制代码 代码如下:
$(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; 
}
代码很简单,使用也很简单,就包括修改都简单,小伙伴们自己看着办吧
其它类似信息

推荐信息