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" href="css/style.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.bgpos.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
	<h1>jquery上下翻动导航</h1>
	<div id="content">
		<ul id="jquerynav" class="navigation">
			<li><a href="#" title="" class="marcofolio">首页</a></li>
			<li><a href="#" title="Subscribe to RSS" class="rss">RSS</a></li>
			<li><a href="#" title="Follow me on Twitter" class="twitter">Twitter</a></li>
			<li><a href="#" title="jQuery" class="jquery">jQuery</a></li>
		</ul>
		
	</div>
</div>
</body>
</html>

JS代码(script.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
$(document).ready(function(){
	// Set the nescesarry data$("#jquerynav li a").each(function(){
	var backgroundPositions = $(this).css('background-position').split(" ");
	// Returns "##px" and "##px"$(this).data("originalXpos",backgroundPositions[0].slice(0,-2));
	// Retrieve the original X position$(this).data("newYpos",0);
	// Set the new Y position to 0}
);
	// Capture the "hover" events$("#jquerynav li a").hover(function(){
	$(this).data("newYpos",$(this).data("newYpos") + 1).stop().animate({
	backgroundPosition:$(this).data("originalXpos") + "px " + $(this).data("newYpos") * 75 + "px"}
,600,"easeOutCirc");
}
,function(){
	$(this).data("newYpos",$(this).data("newYpos") + 1).stop().animate({
	backgroundPosition:$(this).data("originalXpos") + "px " + $(this).data("newYpos") * 75 + "px"}
,400,"easeInCirc");
}
);
}
);

CSS代码(style.css):

/**/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-image:url("../images/bg.jpg");color:#FFFFFF}
a{color:#FFCC00;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
h3{clear:both;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
#content p{color:#eee;margin:10px 5px;}
#content p a{color:#eee;text-decoration:underline;}
/* NAVIGATION */
.navigation{list-style:none;width:800px;height:75px;margin:30px 0;-moz-box-shadow:5px 5px 10px #333;-webkit-box-shadow:5px 5px 10px #333;box-shadow:5px 5px 10px #333;}
.navigation li{display:inline;text-indent:-9999px;}
.navigation li a{display:block;float:left;width:200px;height:75px;background-image:url("../images/buttons.png");}
.navigation li a.marcofolio{background-position:0 0;}
.navigation li a.rss{background-position:-200px 0;}
.navigation li a.twitter{background-position:-400px 0;}
.navigation li a.jquery{background-position:-600px 0;}

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