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;
}
代码很简单,使用也很简单,就包括修改都简单,小伙伴们自己看着办吧