web前端：H5-audio原生標籤，製作音階導航
阿新 • • 發佈：2021-01-29
技術標籤：web前端微信小程式csshtmljscss3html5
1.效果圖
2.less
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
body {
height: 100%;
#wrap {
height: 100%;
width: 100%;
position: absolute;
background: #BCE8F1;
top 3.css
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
overflow: hidden;
}
html body {
height: 100%;
}
html body #wrap {
height: 100%;
width: 100%;
position: absolute;
background: #BCE8F1;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
html body #wrap h1 {
font: 30px "微軟雅黑";
color: tomato;
text-align: center;
margin: 1% auto;
}
html body #wrap ul {
text-decoration: none;
margin: 1% auto;
display: flex;
border-radius: 1%;
}
html body #wrap ul li {
background: tomato;
list-style: none;
min-width: 120px;
height: 60px;
transition: 1s;
border: 2px solid white;
border-radius: 5%;
text-align: center;
margin: 1% .5%;
overflow: hidden;
box-shadow: 2px 2px 5px #000000;
}
html body #wrap ul li:hover {
background: steelblue;
transform: translateY(-10px);
}
html body #wrap ul li a {
display: block;
color: white;
font: 20px "微軟雅黑";
font-weight: bold;
line-height: 60px;
}
html body #wrap ul li a:visited {
text-decoration: none;
}
html body #wrap ul li a:focus {
text-decoration: none;
}
html body #wrap ul li a:hover {
text-decoration: none;
}
html body #wrap ul li .au {
height: 60px;
min-width: 120px;
background: gold;
}
4.js
$(function(){
var liNode=document.querySelectorAll("#wrap > ul > li");
var auNode=document.querySelector("#wrap > ul > audio");
for(var i=0;i<liNode.length;i++){
//mouseover可觸發多次，一次未結束，還會觸發下一次(進出各一次)，可以使用mouseenter一次
liNode[i].addEventListener("mouseenter",function(){
auNode.src="./audio/bubble-3.mp3";
auNode.play();
console.log("發出bubble冒泡聲");
});
}
})
5.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>音階導航audio navigator</title>
</head>
<link rel="stylesheet" href="../6-bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/21-audio-nav.css" />
<body>
<div class="container" id="wrap">
<h1>一刀coder-音階導航</h1>
<ul class="row">
<audio></audio>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">網頁</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">一點諮詢</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">火爆視訊</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">圖片檢索</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">點我知道</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">超級文庫</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">流量貼吧</a>
<div class="au"></div>
</li>
<li class="col-lg-3 col-sm-6">
<a href="javascript:;">歡樂團購</a>
<div class="au"></div>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../6-bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/21-audio-nav.js"></script>
</html>
6.評論獲取本效果原料
