小钢琴
制成的图是GIF的，没有声音，真实的是有声音的，可以弹奏歌曲。
制成思路：
- 先从360网页中把音乐原件审查下载下来。
- 需要知道
li:nth-child(1)和li::before两个CSS知识 -
audio标签
附上源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹钢琴</title>
<style>
ul {
list-style: none;
width: 990px;
margin: 100px auto;
overflow: hidden;
}
ul li {
float: left;
width: 100px;
height: 30px;
background-color: #eeddee;
margin-right: 10px;
position: relative;
}
li::before {
content: "";
width: 100%;
height: 100%;
background-color: red;
position: absolute;
top: 100%;
transition: all 0.2s ease-out 0s;
}
li:nth-child(1)::before {
background-color: #e4c533;
}
li:nth-child(2)::before {
background-color: #f862da;
}
li:nth-child(3)::before {
background-color: #ff9f64;
}
li:nth-child(4)::before {
background-color: #15c3f5;
}
li:nth-child(5)::before {
background-color: #23e631;
}
li:nth-child(6)::before {
background-color: #747474;
}
li:nth-child(7)::before {
background-color: #ff00ff;
}
li:nth-child(8)::before {
background-color: #9dd6f4;
}
li:nth-child(9)::before {
background-color: #db002f;
}
li:hover::before {
top: 0;
}
li.cur::before {
top: 0;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="audios">
<audio src="audio/a4.mp3"></audio>
<audio src="audio/b4.mp3"></audio>
<audio src="audio/c4.mp3"></audio>
<audio src="audio/c5.mp3"></audio>
<audio src="audio/d4.mp3"></audio>
<audio src="audio/d5.mp3"></audio>
<audio src="audio/e4.mp3"></audio>
<audio src="audio/f4.mp3"></audio>
<audio src="audio/g4.mp3"></audio>
</div>
<script>
<!-- 得到li列表 -->
var lis = document.getElementsByTagName("li");
// 得到播放列表
var audios = document.getElementsByTagName("audio");
// 循环监听li事件
for(var i=0;i<lis.length;i++){
// 闭包的影响，编号
lis[i].index = i;
lis[i].onmouseover = function(){
audios[this.index].load();//保持刚才的回音，立即开始新的声音
audios[this.index].play();//播放
}
}
// 键按下
document.onkeydown = function(event){
// event.keyCode键盘的ASCII码
if(event.keyCode>48 && event.keyCode<58){
audios[event.keyCode-49].load();//保持刚才的回音，立即开始新的声音
audios[event.keyCode-49].play();//播放
lis[event.keyCode - 49].className = "cur";//按下的颜色效果
}
}
// 键抬起
document.onkeyup = function(event){
if(event.keyCode>48 && event.keyCode<58){
lis[event.keyCode - 49].className = "";
}
}
</script>
</body>
</html>
