2款jquery具有滑动效果的导航代码

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

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

以下是 2款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">
<!--[if lt IE 7 ]><html class="no-js ie6" lang="en"><![endif]-->
<!--[if IE 7 ]><html class="no-js ie7" lang="en"><![endif]-->
<!--[if IE 8 ]><html class="no-js ie8" lang="en"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为2款具有滑动效果的导航代码，属于站长常用代码" />
<title>2款具有滑动效果的导航代码</title>

<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.color-rgba-patch.js"></script>
<script type="text/javascript" src="js/example.js"></script>
</head>

<body>
<!-- 代码开始 -->
<div class="nav-wrap">
	<ul class="group" id="example-one">
		<li class="current_page_item"><a href="http://www.baidu.com" target="_blank">Home</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Buy Tickets</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Group Sales</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Reviews</a></li>
		<li><a href="http://www.baidu.com" target="_blank">The Show</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Videos</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Photos</a></li>
		<li><a href="http://www.baidu.com" target="_blank">Magic Shop</a></li>
	</ul>
</div>
	
<div class="nav-wrap">   
	<ul class="group" id="example-two">
		<li><a rel="#fe4902" href="http://www.baidu.com" target="_blank">Home</a></li>
		<li><a rel="#A41322" href="http://www.baidu.com" target="_blank">Buy Tickets</a></li>
		<li><a rel="#C6AA01" href="http://www.baidu.com" target="_blank">Group Sales</a></li>
		<li><a rel="#900" href="http://www.baidu.com" target="_blank">Reviews</a></li>
		<li><a rel="#D40229" href="http://www.baidu.com" target="_blank">The Show</a></li>
		<li class="current_page_item_two"><a rel="#98CEAA" href="http://www.baidu.com" target="_blank">Videos</a></li>
		<li><a rel="#1B9B93" href="http://www.baidu.com" target="_blank">Photos</a></li>
		<li><a rel="#8DC91E" href="http://www.baidu.com" target="_blank">Magic Shop</a></li>
	</ul>
</div>

<!-- 代码结束 -->
	
</body>
</html>

JS代码(example.js):

// DOM Ready$(function(){
	var $el,leftPos,newWidth;
	$mainNav2 = $("#example-two");
	/* EXAMPLE ONE */
 /* Add Magic Line markup via JavaScript,because it ain't gonna work without */
 $("#example-one").append("<li id='magic-line'></li>");
	/* Cache it */
 var $magicLine = $("#magic-line");
	$magicLine .width($(".current_page_item").width()) .css("left",$(".current_page_item a").position().left) .data("origLeft",$magicLine.position().left) .data("origWidth",$magicLine.width());
	$("#example-one li").find("a").hover(function(){
	$el = $(this);
	leftPos = $el.position().left;
	newWidth = $el.parent().width();
	$magicLine.stop().animate({
	left:leftPos,width:newWidth}
);
}
,function(){
	$magicLine.stop().animate({
	left:$magicLine.data("origLeft"),width:$magicLine.data("origWidth")}
);
}
);
	/* EXAMPLE TWO */
 $mainNav2.append("<li id='magic-line-two'></li>");
	var $magicLineTwo = $("#magic-line-two");
	$magicLineTwo .width($(".current_page_item_two").width()) .height($mainNav2.height()) .css("left",$(".current_page_item_two a").position().left) .data("origLeft",$(".current_page_item_two a").position().left) .data("origWidth",$magicLineTwo.width()) .data("origColor",$(".current_page_item_two a").attr("rel"));
	$("#example-two a").hover(function(){
	$el = $(this);
	leftPos = $el.position().left;
	newWidth = $el.parent().width();
	$magicLineTwo.stop().animate({
	left:leftPos,width:newWidth,backgroundColor:$el.attr("rel")}
)}
,function(){
	$magicLineTwo.stop().animate({
	left:$magicLineTwo.data("origLeft"),width:$magicLineTwo.data("origWidth"),backgroundColor:$magicLineTwo.data("origColor")}
);
}
);
	/* Kick IE into gear */
 $(".current_page_item_two a").mouseenter();
}
);

CSS代码(lrtk.css):

*{margin:0;padding:0}
body{font:14px Georgia}
header{padding:100px 0 0 0;display:block}
header h1{width:960px;margin:0 auto}
a{color:#eee}
a:hover{color:white}
.nav-wrap{margin:50px auto;background-color:#666;border-top:2px solid #000;border-bottom:2px solid #000}
/* Clearfix */
.group:after{visibility:hidden;display:block;content:"";clear:both;height:0}
*:first-child+html .group{zoom:1}
/* IE7 */
/* Example One */
#example-one{margin:0 auto;list-style:none;position:relative;width:960px}
#example-one li{display:inline-block}
#example-one a{color:#bbb;font-size:14px;float:left;padding:6px 10px 4px 10px;text-decoration:none;text-transform:uppercase}
#example-one a:hover{color:white}
#magic-line{position:absolute;bottom:-2px;left:0;width:100px;height:2px;background:#fe4902}
.current_page_item a{color:white !important}
.ie6 #example-one li,.ie7 #example-one li{display:inline}
.ie6 #magic-line{bottom:-3px}
/* Example Two */
#example-two{margin:0 auto;list-style:none;position:relative;width:960px}
#example-two li{display:inline-block}
#example-two li a{position:relative;z-index:200;color:#bbb;font-size:14px;display:block;float:left;padding:6px 10px 4px 10px;text-decoration:none;text-transform:uppercase}
#example-two li a:hover{color:white}
#example-two #magic-line-two{position:absolute;top:0;left:0;width:100px;background:#900;z-index:100;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.current_page_item_two a{color:white !important}
.ie6 #example-two li,.ie7 #example-two li{display:inline}

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