知识要点
- videoObject.load(): 加载某个视频（音频）文件，即重新播放
- videoObject.play(): 播放视频（音频）文件
- videoObject.remove(): 停止播放视频（音频）文件
ES6小知识
- const关键字：用来声明常量（即保持不变的量）
- let关键字：用来声明变量（即可以变化的量）
代码（背景图片，音频文件可以自己替换哈）：
html:
<div class="container">
<div class="musicBox">
<div class="bottom"><img src="data:images/musicb.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/musict.jpg" width="300" height="300"></div>
</div>
<div class="musicBox">
<div class="bottom"><img src="data:images/01.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/00.jpg" width="300" height="300"></div>
</div>
<div class="musicBox">
<div class="bottom"><img src="data:images/03.jpg" width="300" height="300"></div>
<div class="top"><img src="data:images/02.jpg" width="300" height="300"></div>
</div>
<audio src="autios/music0.mp3" loop></audio>
<audio src="autios/music1.mp3" loop></audio>
<audio src="autios/music2.mp3" loop></audio>
</div>
css:
<style type="text/css">
body {
background: url("images/bg.jpg") no-repeat;
}
.musicBox {
width: 300px;
height: 300px;
position: relative;
margin: 100px 100px;
float: left;
border-radius: 50%;
}
.bottom, .top {
position: absolute;
left:;
top:;
width: 100%;
height: 100%;
border-radius: inherit;
box-shadow: 0 0 14px 2px #FF9800;
overflow: hidden;
}
.top {
transition: all 1s ease-in-out;
transform-origin: bottom;
}
.bottom_rotate {
animation: bottom_rotate 6s linear infinite;
}
@keyframes bottom_rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.music {
transform: rotateX(180deg);
}
</style>
javascript:
<script type="text/javascript">
const topList = document.querySelectorAll(".top");
const bottomList = document.querySelectorAll(".bottom");
const audioList = document.querySelectorAll("audio");
// 声明一个阀门：用来表示音频的是否播放
let flag = 1;
for (let i = 0; i < topList.length; i++) {
topList[i].addEventListener("click", function () {
if (flag == 1) {
this.classList.add("music");
// videoObject.load(): 用来加载某个视频（音频）文件，即重新播放
audioList[i].load();
// videoObject.play()： 播放
audioList[i].play();
// element.classList.add(): 为元素添加 CSS 类
bottomList[i].classList.add("bottom_rotate");
flag = 0;
} else {
this.classList.remove("music");
// videoObject.pause(): 停止播放
audioList[i].pause();
// element.classList.remove(): 为元素移除 CSS 类
bottomList[i].classList.remove("bottom_rotate");
flag = 1;
}
}, false);
}
</script>