jquery-仿flash的一个导航栏特效

浏览数：55 / 时间：2015年06月09日

演示地址：http://itxiaoming.sinaapp.com/demo05/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‘});
	});
});

?动画效果是我根据自己的喜好来写的，喜欢的可以自己更改特效。。

/* 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;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

jquery-仿flash的一个导航栏特效