标签：h5 audio 音阶 height ul flag 实例 var li
<!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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。