<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0;}
li{list-style: none;}
ul{width: 800px;height: 35px;border: 1px solid #ccc;margin:50px auto;overflow: hidden;}
ul li{width: 99px;height: 35px;float: left;border-right: 1px dashed #ccc;text-align: center;line-height: 35px;position: relative;}
ul li span{position: absolute;top:35px;left:0;width: 99px;height: 35px;background: red;z-index: -1;}
</style>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("ul li:last").css("border-right","none");
$("ul li").append('<span></span>');
var colorArr = ["red","green","blue","pink","orange","yellow","yellowgreen","gold"];
$("ul li span").each(function(index){
$(this).css("background-color",colorArr[index]);
});
$("ul li").hover(function(){
var num = $(this).index();
$(this).children('span').stop().animate({top:0},500);//往上走35pox
$("audio").attr("src","music/"+num+".ogg");
},function(){
$(this).children('span').stop().animate({top:"35px"},500);
});
$(window).keydown(function(e) {
var key = 0;
console.log(e.keyCode);//获得键盘键码的
//需求:我们只想按1-8之间才播放音乐;
if(e.keyCode >= 49 && e.keyCode <= 56){
key = e.keyCode - 49;//49-49 =0 50-49 =1
$("audio").attr("src","music/"+key+".ogg");
$("ul li").eq(key).children('span').stop().animate({top:0},500).animate({top:"35px"}, 500);//往上走35pox
}
});
})
</script>
</head>
<body>
<ul>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
<li>导航</li>
</ul>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
<audio autoplay></audio>
</body>
</html>