超炫的jquery仿flash导航栏特效
FLASH导航现在基本上已经是过时了，但是我们可以用jQuery来实现flash效果，非常的不错。
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>demo01</title>
<linkrel="stylesheet"type="text/css"href="demo.css">
<scripttype="text/javascript"src="jquery.js"></script>
<scripttype="text/javascript"src="demo.js"></script>
</head>
<body>
<divid="main">
<divclass="menu">
<divclass="menu_bback1"></div>
<span>测试</span>
</div>
<divclass="menu">
<divclass="menu_bback2"></div>
<span>测试</span>
</div>
<divclass="menu">
<divclass="menu_bback3"></div>
<span>测试</span>
</div>
<divclass="menu">
<divclass="menu_bback4"></div>
<span>测试</span>
</div>
<divclass="menu">
<divclass="menu_bback5"></div>
<span>测试</span>
</div>
<divclass="menu">
<divclass="menu_bback6"></div>
<span>测试</span>
</div>
</div>
</body>
</html>
$(document).ready(function(){
$(".menu").mouseover(function(){
vardiv=$(this).children(".menu_b");
varspan=$(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(){
vardiv=$(this).children(".menu_b");
varspan=$(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"});
});
});
动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。
代码很简单，使用也很简单，就包括修改都简单，小伙伴们自己看着办吧
/*demo01css*/
#main{
background:#EEE;
display:inline-block;
padding:10px;
}
.menu{position:relative;
width:100px;
height:40px;
margin:10pxauto;
}
.menu_b{
position:absolute;
width:0px;
height:0px;
background:red;
z-index:1px;
top:50%;
left:50%;
}
.menuspan{
position:inherit;
display:block;
text-align:center;
line-height:40px;
z-index:3px;
font-size:14px;
font-family:"MicrosoftYahei";
color:#777;
cursor:pointer;
}
.back1{
background:#FF0000;
}
.back2{
background:#921AFF;
}
.back3{
background:#00CACA;
}
.back4{
background:#00DB00;
}
.back5{
background:#FF5809;
}
.back6{
background:#E1E100;
}
相关文章