jQuery浮动弹性菜单效果特效代码

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

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

以下是 jQuery浮动弹性菜单效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>漂亮的jQuery浮动菜单</title>
	<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
	<script>
	$(document).ready(function () {
		//get the default top value
		var top_val = $('#menu li a').css('top');
		//animate the selected menu item
		$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});
		$('#menu li').hover(
			function () {
				//animate the menu item with 0 top value
				$(this).children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});		
			},
			function () {
				//set the position to default
				$(this).children('a').stop().animate({top:top_val}, {easing: 'easeOutQuad', duration:500});		

				//always keep the previously selected item in fixed position			
				$('#menu li.selected').children('a').stop().animate({top:0}, {easing: 'easeOutQuad', duration:500});		
			}		
		);
	});
	</script>
	<style>
	#menu {
		list-style:none;	
		padding:0;
		margin:0 auto;;
		height:70px;
		width:600px;
	}
	
		#menu li {
			float:left;
			width:109px;
			height:inherit;
			position:relative;
			overflow:hidden;
		}

		#menu li a  {
			position:absolute;
			top:20px;
			text-indent:-999em;
			background:url(menu.png) no-repeat 0 0;
			display:block; 
			width:109px; 
			height:inherit;

			/* fast png fix for ie6 */
			position:relative;
		behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
		}
	
	</style>
	
</head>
<body>
<br/><br/><br/>

<ul id="menu">
	<li><a href="#">Item 1</a></li>
	<li><a href="#">Item 2</a></li>
	<li class="selected" class="item3"><a href="#">Item 3</a></li>
	<li><a href="#">Item 4</a></li>
	<li><a href="#">Item 5</a></li>
</ul>
</body>
</html>

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