jQuery鼠标悬停上下滑动导航条

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery鼠标悬停上下滑动导航条的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery鼠标悬停上下滑动导航条 </title>
<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>

CSS代码(style.css):

@charset "utf-8";body{margin:0px;padding:0px;font-family:"微软雅黑","宋体";font-size:12px;color:#CCCCCC;}
.cls{clear:both;}
a:focus{outline:none;}
.menu{height:48px;display:block;padding:0px;width:999px;margin:40px auto 0 auto;}
.menu ul{list-style:none;padding:0;margin:0;}
.menu ul li{float:left;overflow:hidden;position:relative;line-height:48px;text-align:center;}
.menu ul li a{position:relative;display:block;width:111px;height:48px;font-family:"微软雅黑","宋体";font-size:14px;text-decoration:none;cursor:pointer;font-weight:bold;line-height:48px;}
.menu ul li a span{position:absolute;left:0;width:111px;}
.menu ul li a span.out{top:0px;}
.menu ul li a span.over,.menu ul li a span.bg{top:-48px;}
#menu2{background-image:url(../images/s_03.jpg);background-repeat:repeat;}
#menu2 ul li a{color:#FFFFFF;}
#menu2 ul li a span.over{color:#FFF;height:48px;width:111px;background-image:url(../images/w_03.jpg);background-repeat:repeat;}

附件:下载该文件资源,减少时间成本(增值服务)