脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript开发中超炫的jquery仿flash导航栏特效，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
FLASH导航现在基本上已经是过时了，但是我们可以用jQuery来实现flash效果，非常的不错。
代码如下:
<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>
<p id="main">
<p class="menu">
<p class="menu_b back1"></p>
<span>测试</span>
</p>
<p class="menu">
<p class="menu_b back2"></p>
<span>测试</span>
</p>
<p class="menu">
<p class="menu_b back3"></p>
<span>测试</span>
</p>
<p class="menu">
<p class="menu_b back4"></p>
<span>测试</span>
</p>
<p class="menu">
<p class="menu_b back5"></p>
<span>测试</span>
</p>
<p class="menu">
<p class="menu_b back6"></p>
<span>测试</span>
</p>
</p>
</body>
</html>
代码如下:
$(document).ready(function(){
$(".menu").mouseover(function(){
var p = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往右移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
p.stop(true,false).animate({width:'100px',marginLeft:'-50px',height:'1px',opacity:'1'},300);
p.animate({height:'40px',marginTop:'-20px',opacity:'1'},300);
//显示字体，往左移动20px
span.animate({opacity:'1',left:'0px'},300);
span.css({color:'#FFF'});
});
$(".menu").mouseout(function(){
var p = $(this).children(".menu_b");
var span = $(this).children("span");
//隐藏字体，往左移动20px
span.stop(true,false).animate({opacity:'0',left:'20px'},200);
//显示背景动画
p.stop(true,false).animate({height:'1px',marginTop:'0px',opacity:'1'},300);
p.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;
}
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript开发中超炫的jquery仿flash导航栏特效全部内容，希望文章能够帮你解决javascript代码实例教程-JavaScript开发中超炫的jquery仿flash导航栏特效所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。