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=gb2312" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery实现导航栏上下滑动效果，属于站长常用代码" />
<title>jQuery实现导航栏上下滑动效果</title>
<script type="text/javascript" src="js/jquery.js"></script>
<link rel="stylesheet" href="css/lrtk.css" type="text/css" media="screen" charset="gbk" />
</head>
<body>
<!-- 代码 开始 -->
<div id="sidenav">
	<!-- navigation -->
	<div id="navigation" class="class100 active">
		<div style="top: 124px;" class="depth2_bg" id="depth2_bg"></div>
		<h2 class="depth1Title introduce"><img src="images/h2_lnbtitle1.gif" alt="NE KIDS"></h2>
		<ul class="introduce">
			<li class="brand" navindex="0"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb110_off.png" alt=""></a></li>
			<li class="program"  navindex="1"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb120_on.png" alt=""></a></li>
			<li class="curriculum"  navindex="2"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb130_off.png" alt=""></a></li>
			<li class="study_effect"  navindex="3"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb140_off.png" alt=""></a></li>
			<li class="character"  navindex="4"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb150_off.png" alt=""></a></li>
			<li class="online_study last"  navindex="5"><a href="http://www.baidu.com/" target="_blank"><img src="images/lnb160_off.png" alt=""></a></li>
		</ul>
	</div>
</div>
<!-- 代码 结束 -->
<div style="clear:both"></div>
<script type="text/javascript" src="js/menu.js"></script>	
<style>
/* 非必要的样式 只是为了居中显示菜单 */
#sidenav{margin:0 auto;padding-top:20px}
body{text-align:center;}
</style>	
</body>
</html>

JS代码(menu.js):

(function(){
	var depth2_bg = document.getElementById("depth2_bg");
	var oldTop = parseInt(depth2_bg.style.top);
	function start_move(oDiv,target){
	clearInterval(oDiv.timer);
	oDiv.timer = setInterval(function (){
	var top = parseInt(oDiv.style.top);
	var speed=(target-top)/5;
	speed=speed>0?Math.ceil(speed):Math.floor(speed);
	if (Math.abs(target - top) < 2){
	oDiv.style.top=target+'px';
	clearInterval(oDiv.timer);
}
else{
	oDiv.style.top=top+speed+'px';
}
}
,30);
}
function highlight(index){
	$(".introduce li").each(function(){
	var this_index = $(this).attr('navindex');
	if(this_index == index){
	var img = $(this).children('a').children('img');
	var src = img.attr('src').replace('_off','_on');
	img.attr('src',src);
}
else{
	var img = $(this).children('a').children('img');
	var src = img.attr('src').replace('_on','_off');
	img.attr('src',src);
}
}
);
}
$(".introduce li").mouseover(function(){
	var index = $(this).attr('navindex');
	var targetTop = 95 + index * 29;
	highlight(index);
	start_move(depth2_bg,targetTop);
}
);
	// recover$("#navigation").mouseout(function(){
	highlight(1);
	start_move(depth2_bg,oldTop);
}
);
}
)();

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
body{margin:0px;padding:0px;color:rgb(119,119,119);font-style:normal;font-size:12px;font-family:'??',verdana;line-height:18px;}
div,ul,ol,li,dl,dt,dd,form,fieldset,input,button,p,h1,h2,h3,h4,h5,h6,blockquote,iframe,th,td{margin:0px;padding:0px;}
img{border:0px none;vertical-align:middle;}
li{list-style:none outside none;}
i,em,u,cite{font-style:normal;}
a{color:rgb(119,119,119);font-family:dotum,verdana,arial,applegothic,sans-serif;font-size:12px;text-decoration:none;}
a:hover{text-decoration:none;}
form{display:inline;}
select,input,textarea{color:rgb(102,102,102);font-family:dotum,verdana,arial,applegothic,sans-serif;font-size:inherit;vertical-align:middle;}
#container{padding-top:35px;width:100%;}
#sidenav{position:relative;width:160px;}
#navigation{visibility:hidden;position:relative;float:right;width:155px;height:100%;padding-bottom:0px;background:none repeat scroll 0% 0% rgb(27,163,169);}
#navigation.active{visibility:visible;}
#navigation .depth2_bg{position:absolute;top:95px;left:-8px;width:166px;height:40px;background:url('bg_lnbover6.png') no-repeat scroll 0px 0px transparent;z-index:10;}
#navigation ul{}
#navigation li{line-height:0;font-size:0px;}
#navigation li.last{padding-bottom:40px;}
#navigation li a img{vertical-align:top;}
#navigation li a{position:relative;display:block;padding:8px 0px 8px 20px;z-index:50;}
#navigation.class100{background:none repeat scroll 0% 0% rgb(243,125,10);}
#navigation.class100 .depth2_bg{background:url('../images/bg_lnbover1.png') no-repeat scroll 0px 0px transparent;}

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