首页 > 特效插件 > 导航菜单 >  阶梯状动画导航条jquery代码下载正文

阶梯状动画导航条jquery代码下载

特效介绍
导航条jquery代码下载


提示：您可以先修改部分代码再运行

阶梯状动画导航条jquery代码下载。本插件兼容IE6+浏览器。
使用方法

1、在头部引入下面的代码：

<script src="https://5.jimth.com/download/jquery/jquery-1.8.3.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){
			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>

2、在需要防止导航条的地方引入下面的代码：

<div id="div">
	<ul id="ul1">
		<li id="li1">
			<a href="#">首&nbsp;&nbsp;页</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>


TAGS: jquery导航条