js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:首页 > 网页特效 > JS常用代码 > 导航菜单

js特仿flash导航条鼠标悬停上下文字滑动特效

发布时间:2015-09-08 21:22:26    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

js特仿flash导航条鼠标悬停上下文字滑动特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<title>js特仿flash导航条鼠标悬停上下文字滑动特效</title>    
		<meta name="keywords" content="导航条,动画导航,滑动导航" />    
		<link href="css/style.css" rel="stylesheet" type="text/css" />    
		<script type="text/javascript" src="js/jquery.min.js"></script>    
		<script type="text/javascript">    
			$(document).ready(function() {    
				$("#menu2 li a").wrapInner( '<span class="out"></span>' );    
				$("#menu2 li a").each(function() {    
					$( '<span class="over">' +  $(this).text() + '</span>' ).appendTo( this );    
				});    
				$("#menu2 li a").hover(function() {    
					$(".out",	this).stop().animate({'top':	'48px'},	300); // move down - hide    
					$(".over",	this).stop().animate({'top':	'0px'},		300); // move down - show    
				}, function() {    
					$(".out",	this).stop().animate({'top':	'0px'},		300); // move up - show    
					$(".over",	this).stop().animate({'top':	'-48px'},	300); // move up - hide    
				});    
			});    
		</script>    
	</head>    
	<body>    
		<div id="menu2" class="menu">    
			<ul>    
			<li><a href="#">首 页</a></li>    
			<li><a href="#">预报预警</a></li>    
			<li><a href="#">气象新闻</a></li>    
			<li><a href="#">气象服务</a></li>    
			<li><a href="#">行政审批</a></li>    
			<li><a href="#">信息公开</a></li>    
			<li><a href="#">气象科普</a></li>    
		<li><a href="#">党风廉政</a></li>    
			<li><a href="#">气象科普</a></li>    
			</ul>    
			<div class="cls"></div>    
		</div>    
	</body>    
</html>



导航条 动画导航 滑动导航

jquery.ScrollNav精美滑动菜单导航条特效

jquery实现中英文字切换导航条,鼠标悬停滑动下拉二级导航菜单

js特仿flash导航条鼠标悬停上下文字滑动特效

jquery实现网站注册动态步骤导航条特效

jquery实现导航条宽度随二级菜单宽度变化的特效代码

css3实现酷炫导航条制作鼠标悬停下拉二级导航菜单特效代码

jQuery实现适合手机移动端应用的导航条菜单特效代码