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>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	
	$("#demo01 a").hover(function(){
		$(this).animate({
			marginTop: "8px"
		}, 250);
	}, function(){
		$(this).animate({
			marginTop: "0px"
		}, 250);
	});
	
	$("#demo02 a").hover(function(){
		$(this).animate({
			marginTop: "-10px"
		}, 250);
	}, function(){
		$(this).animate({
			marginTop: "0px"
		}, 250);
	});
	
});
</script>
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:url(images/bg.jpg);}

/* slider-nav */
.slider-nav{width:800px;height:54px;overflow:hidden;margin:0 auto;}
.slider-nav a{float:left;margin:0 2px 0 0;display:inline-block;width:90px;text-align:center;font-size:14px;color:#333;height:34px;line-height:34px;overflow:hidden;padding:10px 0 0 0;background:url(images/menu1.gif) no-repeat;text-decoration:none;}
/* demo01 */
#demo01{position:relative;margin-top:-8px;}
/* demo02 */
#demo02{position:relative;margin-top:20px;overflow:visible;}
#demo02 a{background:url(images/menu2.gif);position:relative;padding:0 0 10px 0;}
</style>

<div id="demo01" class="slider-nav">
	<a href="#">首　　页</a>
	<a href="#">企业文化</a>
	<a href="#">产品展示</a>
	<a href="#">新闻中心</a>
	<a href="#">阳光服务</a>
	<a href="#">加盟代理</a>
	<a href="#">在线咨询</a>
</div>

<div style="height:50px;"></div>

<div style="height:54px;overflow:hidden;">
	<div id="demo02" class="slider-nav">
		<a href="#">首　　页</a>
		<a href="#">企业文化</a>
		<a href="#">产品展示</a>
		<a href="#">新闻中心</a>
		<a href="#">阳光服务</a>
		<a href="#">加盟代理</a>
		<a href="#">在线咨询</a>
	</div>
</div>
</body>
</html>

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