阶梯状动画导航条jquery代码下载
- 作者：网页模板
- 大小：0MB
- 点击次数：
- 发布时间：2014-03-08 13:21
特效介绍
提示：您可以先修改部分代码再运行
使用方法
1、在头部引入下面的代码：
<script src="http://www.5imoban.net/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="#">首 页</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>
- 本文标签：
- jquery导航条
