html+css+js的钢琴案例

界面大致布局：

鼠标点击钢琴上的按键 下面音符会自动上滑

音乐素材：

图片素材：

附上素材下载链接：
链接：https://pan.baidu.com/s/17-jMxkeCb5Xfb7kezY_h8A
提取码：1d0e

实现代码：

//HTML部分
<ul class="key-box">
	<li>do
		<span></span>
	</li>
	<li>re
		<span></span>
	</li>
	<li>mi
		<span></span>
	</li>
	<li>fa
		<span></span>
	</li>
	<li>sol
		<span></span>
	</li>
	<li>
		la
		<span></span>
	</li>
	<li>si
		<span></span>
	</li>
	<li>do</li>
</ul>
<ul class="music-box">
	<li><img src="img/do.png"/></li>
	<li><img src="img/re.png"/></li>
	<li><img src="img/mi.png"/></li>
	<li><img src="img/fa.png"/></li>
	<li><img src="img/sol.png"/></li>
	<li><img src="img/la.png"/></li>
	<li><img src="img/si.png"/></li>
</ul>
<audio src="mp3/1do.mp3"></audio>
<audio src="mp3/2re.mp3"></audio>
<audio src="mp3/3mi.mp3"></audio>
<audio src="mp3/4fa.mp3"></audio>
<audio src="mp3/5so.mp3"></audio>
<audio src="mp3/6la.mp3"></audio>
<audio src="mp3/7si.mp3"></audio>
<audio src="mp3/8do.mp3"></audio>

//css部分
*{
	padding: 0;
	margin: 0;
}
li{
	list-style: none;
}
html{
	width: 100%;
	height: 100%;
}
body{
	width: 100%;
	height: 100%;
	overflow: hidden;
	background:url(../img/bg.jpg);
	background-size: 100% 100%;
}
.key-box{
	width: 672px;
	margin: 50px auto;
}
.key-box li{
	position: relative;
	float: left;
	width: 80px;
	height: 300px;
	border:2px solid black ;
	background: white;
	text-align: center;
	box-shadow: 10px 10px 20px black;
	
}
.key-box li span{
	position: absolute;
	right: -20px;
	background: #000;
	height: 150px;
	width: 40px;
	border-radius: 2px ;
	z-index: 1;
}
.music-box{
	width: 1200px;
	height: 600px;
	margin-left: -600px;
	left: 50%;
	position: absolute;
	z-index: -1;
	overflow: hidden;
}
.music-box li{
	position: relative;
	float: left;
	margin-left: 50px;
	top: 600px;
}
.music-box li img {
	width: 120px;
}
.music-box li.active{
	top: 0;
	opacity: 0.1;
	transition: all 3s;
}

//js部分
$(function(){
	$(".key-box li").click(function(){
		var n = $(this).index();
		$("audio").stop().get(n).play();
		$(this).css("box-shadow","none")
		.siblings().css("box-shadow","10px 10px 20px black");
		$(".music-box li").eq(n).addClass("active").siblings().removeClass("active");
	})
	function play(index){
		$("audio").get(index).play();
		$(".key-box li").eq(index).css("box-shadow","none");
		$(".key-box li").eq(index).siblings().css("box-shadow","10px 10px 20px black");
		$(".music-box li").eq(index).addClass("active").siblings().removeClass("active");
	}
	function stop(index){
		$("audio").get(index).pause();
		$("audio").get(index).load();
	}
	//设置键盘控制
	$(document).keydown(function(event){
		console.log(event.keyCode);
		if(event.keyCode == 97){
			play(0);
		}
		if(event.keyCode == 98){
			play(1);
		}
		if(event.keyCode == 99){
			play(2);
		}
		if(event.keyCode == 100){
			play(3);
		}
		if(event.keyCode == 101){
			play(4);
		}
		if(event.keyCode == 102){
			play(5);
		}
		if(event.keyCode == 103){
			play(6);
		}
		if(event.keyCode == 104){
			play(7);
		}
		
	})
	$(document).keyup(function(event){
		console.log(event.keyCode);
		if(event.keyCode == 97){
			stop(0);
		}
		if(event.keyCode == 98){
			stop(1);
		}
		if(event.keyCode == 99){
			stop(2);
		}
		if(event.keyCode == 100){
			stop(3);
		}
		if(event.keyCode == 101){
			stop(4);
		}
		if(event.keyCode == 102){
			stop(5);
		}
		if(event.keyCode == 103){
			stop(6);
		}
		if(event.keyCode == 104){
			stop(7);
		}
	})
})