一、效果图
二、源码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{list-style:none;}
nav{
width: 800px;
height:35px;
border:1px solid #ccc;
margin: 100px auto;
}
nav li{
width: 99px;
height:35px;
border-right:1px dashed #ccc;
float:left;
text-align: center;
line-height: 35px;
position: relative;
overflow: hidden;
}
nav li ins{
position: absolute;
top:35px;
left:0;
width:100%;
height:100%;
background-color: pink;
z-index: -1;
}
</style>
<script src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function() {
$("nav li:last").css("border",0);
//隐式迭代
$("nav li").append("<ins></ins>");
var arr = new Array("red","pink","orange","yellow","yellowgreen","green","blue","purple");
$("nav li ins").each(function(index,ele) {
$(this).css("background-color",arr[index]);
})
$("nav li").mouseenter(function() {
$(this).children("ins").stop().animate({top:0},200);
$("audio").get($(this).index()).load(); //加载
$("audio").get($(this).index()).play(); //播放
}).mouseleave(function() {
$(this).children("ins").stop().animate({top:35},200);
})
//键盘事件
$(window).keydown(function(event) {
var num = 0;
if(event.keyCode >= 49 && event.keyCode <=56)
{
num = event.keyCode - 49;
$("nav li").eq(num).trigger("mouseenter");
setTimeout(function() {
$("nav li").eq(num).trigger("mouseleave");
},300)
}
})
})
</script>
</head>
<body>
<nav>
<ul>
<li>
邓紫棋
</li>
<li>邓紫棋
</li>
<li>邓紫棋</li>
<li>邓紫棋</li>
<li>邓紫棋</li>
<li>邓紫棋</li>
<li>邓紫棋</li>
<li>邓紫棋</li>
</ul>
</nav>
<audio src="music/1.ogg"></audio>
<audio src="music/2.ogg"></audio>
<audio src="music/3.ogg"></audio>
<audio src="music/4.ogg"></audio>
<audio src="music/5.ogg"></audio>
<audio src="music/6.ogg"></audio>
<audio src="music/7.ogg"></audio>
<audio src="music/8.ogg"></audio>
</body>
</html>