超炫的jquery仿flash导航栏特效
推荐给大家一款jQuery实现的仿FLASH超炫的导航特效代码，有需要的小伙伴直接拿走吧
FLASH导航现在基本上已经是过时了，但是我们可以用jQuery来实现flash效果，非常的不错。
演示地址：http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html
复制代码 代码如下:
<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>
<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'});
});
});
动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。
精彩图集
精彩文章