jQuery动态背景导航菜单特效代码

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

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

以下是 jQuery动态背景导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery动态背景导航菜单</title>
<link rel="stylesheet" type="text/css" media="all" href="screen.css" />
<script type="text/javascript" src="jquery-1.6.min.js" charset="utf-8"></script>
<script type="text/javascript" src="jquery.backgroundPosition.fixed.js" charset="utf-8"></script>
<script type="text/javascript" src="menuAnimation2.js" charset="utf-8"></script>
<style type="text/css">
	#content {
		position: relative;
		top: 100px;
		width:800px; 
		position:relative;
		margin: 0 auto;
	}

	#menu {
		float: left;
		width: 800px;
		list-style: none;
		line-height: 33px;
		background: url('menu_bg1.gif') no-repeat top left;
		border-top: 1px solid #000;
		border-bottom: 1px solid #000;
		margin: 0;
		padding:0;
	}

	#menu li {
		float: left;
		border-left: 1px solid #000;
	}

	#menu li a {
		float: left;
		font-size: 1.2em;
		color: #fff;
		border-left: 1px solid #ccc;
		text-decoration: none;
		background: url('menu_bg1.gif') no-repeat top left;
	}
	
	#menu li a:hover {
		background: url('menu_bg_active.gif') no-repeat top left;
	}

	#menu li:first-child { border: none; }
	#menu li:first-child a { border: none; }
	
	</style>
</head>

<body>

<div id="content">
	<br />
	<ul id="menu">
		<li><a href="#" title="#">Lorem ipsum</a></li>
		<li><a href="#" title="#">Dolor sit amet</a></li>
		<li><a href="#" title="#">Consectetur</a></li>
		<li><a href="#" title="#">Fusce orci</a></li>
		<li><a href="#" title="#">Pretium ac hendrerit</a></li>
	</ul>
	<br />
</div>
</body>
</html>

JS代码(menuAnimation2.js):

$(document).ready(function(){
	// ------------- Top menu auto width and animation ---------------- //var width = 0;
	$('#menu li').each(function(){
	width += $(this).width()+1;
}
);
	var padding = parseInt((($('#menu').width() - width) / $('#menu li a').length)/2);
	var pixLeft = ($('#menu').width() - width)-(padding*$('#menu li a').length*2)$('#menu li a').each(function(index){
	if (index+1 != $('#menu li a').length){
	$(this).css('padding','0 '+padding+'px');
	$(this).css('background-position','-' + $(this).position().left + 'px 0');
}
else{
	padding = padding + (pixLeft/2);
	$(this).css('padding','0 '+padding+'px');
	$(this).css('background-position','-' + $(this).position().left + 'px 0');
}
}
);
	$('#menu li a').mouseover(function(){
	$(this).stop().animate({
	backgroundPosition:'-' + $(this).position().left - 129 + 'px 0'}
,2000).mouseout(function(){
	$(this).stop().animate({
	backgroundPosition:'-' + $(this).position().left + 'px 0'}
,2000)}
)}
);
	// ------------- END Top menu auto width and animation ---------------- //}
);

CSS代码(screen.css):

/* --- Structure --- */
html{height:100%;min-height:100%;}
body{position:relative;margin:0;padding:0;font-size:1em;font:62.8% Arial,Tahoma,Helvetica,sans-serif;min-width:1130px;min-height:100%;height:100%;background:#1e1e1d;color:#FFFFFF;}
/* --- End Structure --- */
/* --- Standart Tag's --- */
h1,h2,h3,h4,h5,h6,form,fieldset,dl,ul{margin:0;padding:0;}
strong,b{font-weight:bold;}
em,i{font-style:italic;}
small{display:block;}
fieldset{border:0;}
img{border:none;}
a{color:#FFCC00;text-decoration:none;}
a:hover{text-decoration:underline;}
a:focus{outline-style:none;}
/* --- End Standart Tag's --- */
/* --- Content --- */
.go_back{position:absolute;top:15px;left:240px;color:#ff0072;font-size:1.6em;}

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