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=utf-8" />
<title>jquery古典风格鼠标悬停导航</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>

<ul class="menu" id="menu">
	<li class="current"><span class="ipod_1 aaa"></span><a href="http://www.baidu.com/"><img src="images/7.png" /></a></li>
	<li><span class="ipod_2"></span><a href="http://www.baidu.com/"><img src="images/6.png" /></a></li>
	<li><span class="ipod_3"></span><a href="http://www.baidu.com/"><img src="images/5.png" /></a></li>
	<li><span class="ipod_4"></span><a href="http://www.baidu.com/"><img src="images/4.png" /></a></li>
	<li><span class="ipod_5"></span><a href="http://www.baidu.com/"><img src="images/3.png" /></a></li>
</ul>

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){

	var d=1000;
	
	$('#menu span').each(function(){
		$(this).stop().animate({
			'top':'-122px'
		},d+=250);
	});
	$('#menu .aaa').each(function(){
		$(this).stop().animate({
			'top':'0px'
		},d+=250);
	});
	$('#menu .aaa').each(function(){
		$(this).stop().animate({
			'top':'0px'
		});
	});
	$('#menu > li').hover(function(){
		var $this = $(this);
		$('a',$this).addClass('hover');
		$('span',$this).stop().animate({'top':'0px'},300).css({'zIndex':'-1'});
	},function(){
		if(!$(this).hasClass("current"))
		{
		var $this = $(this);
		$('a',$this).removeClass('hover');
		$('span',$this).stop().animate({'top':'-122px'},800).css({'zIndex':'-1'});
		}
	});
	
});
</script>
</body>
</html>

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";background:#000;}
/* menu */
ul.menu{width:450px;height:130px;overflow:hidden;margin:20px auto 0 auto;position:relative;}
ul.menu li{float:left;width:39px;margin-right:50px;}
ul.menu li a{text-decoration:none;width:39px;color:#333333;float:left;margin-right:50px;}
ul.menu li a img{margin-top:15px;}
ul.menu li span{width:39px;height:122px;background-repeat:no-repeat;background-color:transparent;position:absolute;z-index:-1;top:182px;cursor:pointer;left:0px;}
ul.menu li span.ipod_1{background-image:url(../icons/2.png);left:-2px;/*128/2 - 32(half of icon) +1 of border*/
}
ul.menu li span.ipod_2{background-image:url(../icons/2.png);left:87px;/* plus 128 + 2px of border*/
}
ul.menu li span.ipod_3{background-image:url(../icons/2.png);left:172px;}
ul.menu li span.ipod_4{background-image:url(../icons/2.png);left:264px;}
ul.menu li span.ipod_5{background-image:url(../icons/2.png);left:354px;}

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