jQuery阶梯动画导航条特效代码

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

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

以下是 jQuery阶梯动画导航条特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jQuery阶梯动画导航条</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<style>
*{margin: 0;padding: 0;}
ul li{list-style: none;}
a{text-decoration: none;color: #333;}
body{background: #F4F4EA;}
/***************/
#div{width:910px;height:38px;margin:200px auto;}
#ul1{height:38px;border:#ccc solid 1px;border-right:none;position:relative;overflow:hidden;}
#ul1 li{float:left;height:38px;line-height:38px;width:100px;border-right:#ccc solid 1px;text-align:center;}
#ul1 li a{position:relative;}
.div1{height:38px;}
#li1 .div1{background:#b9d329;}
#li2 .div1{background:#c0ebf7;}
#li3 .div1{background:#b9d329;}
#li4 .div1{background:#69bcf3;}
#li5 .div1{background:#79d9f3;}
#li6 .div1{background:#fa5f94;}
#li7 .div1{background:#acd180;}
#li8 .div1{background:#fab4cc;}
#li9 .div1{background:#ffae5b;}
</style>
<script>
	$(function(){
		$("#div #ul1 li .div1").css("margin-top","0px");
		var $L = $("#div #ul1 li");

		$(document).keydown(function(event){
			//a65 s83 d68 f70 g71 h72 j74 k75 l76
			if(event.keyCode == 65){
				playmusic(0);
			}else if(event.keyCode == 83){
				playmusic(1);
			}
			else if(event.keyCode == 68){
				playmusic(2);
			}
			else if(event.keyCode == 70){
				playmusic(3);
			}
			else if(event.keyCode == 71){
				playmusic(4);
			}
			else if(event.keyCode == 72){
				playmusic(5);
			}
			else if(event.keyCode == 74){
				playmusic(6);
			}
			else if(event.keyCode == 75){
				playmusic(7);
			}
			else if(event.keyCode == 76){
				playmusic(8);
			}

		});

		function playmusic(i){
			$L.eq(i).children("div").stop().animate({marginTop:'-38px'},200);
				var a = i+1+".ogg";
				$("audio").eq(i).attr("src",a);
				$L.eq(i).children("div").animate({marginTop:'0'},200,'',function(){
					$(this).children("div").css("margin-top","0px");
				});
		}

		$.each($L,function(i){
			$(this).hover(function(){
				$(this).children("div").stop().animate({marginTop:'-38px'},200);
				var a = i+1+".ogg";
				$("audio").eq(i).attr("src",a);
			},function(){
				$(this).children("div").animate({marginTop:'0'},200,'',function(){
					$(this).children("div").css("margin-top","0px");
				});
			});
		});
	});
</script>

</head>
<body>
	<div id="div">
		<ul id="ul1">
			<li id="li1">
				<a href="#">我的主页</a>
				<div class="div1"></div>
			</li>
			<li id="li2">
				<a href="#">新闻头条</a>
				<div class="div1"></div>
			</li>
			<li id="li3">
				<a href="#">电视剧</a>
				<div class="div1"></div>
			</li>
			<li id="li4">
				<a href="#">最新电影</a>
				<div class="div1"></div>
			</li>
			<li id="li5">
				<a href="#">小游戏</a>
				<div class="div1"></div>
			</li>
			<li id="li6">
				<a href="#">小说大全</a>
				<div class="div1"></div>
			</li>
			<li id="li7">
				<a href="#">旅游度假</a>
				<div class="div1"></div>
			</li>
			<li id="li8">
				<a href="#">正品购物</a>
				<div class="div1"></div>
			</li>
			<li id="li9">
				<a href="#">今日团购</a>
				<div class="div1"></div>
			</li>
		</ul>
	</div>
	<div id="pl">
		
	</div>
	<div>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
		<audio autoplay="autoplay">
			您的浏览器不支持audio标签
		</audio>
	</div>
</body>
</html>

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