h5-音阶导航实例
作者：互联网
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
margin: 0 auto;
}
ul{
width: 910px;
height: 38px;
background-color: #bfa;
list-style: none;
border: 1px solid;
margin: 310px auto;
overflow: hidden;
}
ul li{
float: left;
height: 100%;
width: 100px;
text-align: center;
line-height: 38px;
}
ul>li:not(:last-child){
border-right: 1px solid;
}
a{
text-decoration: none;
display: block;
color: black;
}
ul>li>div.down{
height: 100%;
background-color: antiquewhite;
transition: 1s;
}
ul>li:hover .down{
transform: translateY(-38px);
}
</style>
<title>音阶导航</title>
</head>
<body>
<audio src="http://s8.qhimg.com/share/audio/piano1/a4.mp3" controls></audio>
<div id="wrap">
<ul class="nav">
<li flag="a">
<a href="#">我的主页</a>
<div class="down"></div>
</li>
<li>
<a href="#">新闻头条</a>
<div class="down"></div>
</li>
<li flag="b">
<a href="#">电视剧</a>
<div class="down"></div>
</li>
<li>
<a href="#">最新电影</a>
<div class="down"></div>
</li>
<li flag="c">
<a href="#">腿长一米八</a>
<div class="down"></div>
</li>
<li>
<a href="#">小说大全</a>
<div class="down"></div>
</li>
<li flag="d">
<a href="#">旅游度假</a>
<div class="down"></div>
</li>
<li>
<a href="#">正品团购</a>
<div class="down"></div>
</li>
<li flag="e">
<a href="#">今日团购</a>
<div class="down"></div>
</li>
</ul>
</div>
</body>
<script>
window.onload = function(){
var liNodes = document.querySelectorAll('.nav>li');
var audio = document.querySelector('audio');
for(var i=0;i<liNodes.length;i++){
liNodes[i].addEventListener('mouseenter',function(){
var flag = this.getAttribute('flag');
//var flag = this.dataset.flag;
if(flag){
audio.src = "http://s8.qhimg.com/share/audio/piano1/"+flag+"4.mp3";
audio.play();}
})
}
}
</script>
</html>
标签：h5,audio,音阶,height,ul,flag,实例,var,li 来源： https://blog.csdn.net/weixin_54057363/article/details/123631716