html+css+js的钢琴案例

谁借莪１个温暖的怀抱￠ 2021-11-29 10:14 387阅读 0赞

界面大致布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qeF8_size_16_color_FFFFFF_t_70]

鼠标点击钢琴上的按键 下面音符会自动上滑  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qeF8_size_16_color_FFFFFF_t_70 1]  
音乐素材：  
![在这里插入图片描述][20190721210009317.png]  
图片素材：  
![在这里插入图片描述][20190721210025457.png]  
附上素材下载链接：  
链接：[https://pan.baidu.com/s/17-jMxkeCb5Xfb7kezY\_h8A][https_pan.baidu.com_s_17-jMxkeCb5Xfb7kezY_h8A]  
提取码：1d0e

实现代码：

//HTML部分
 <ul class="key-box">
 	<li>do
 		
 	</li>
 	<li>re
 		
 	</li>
 	<li>mi
 		
 	</li>
 	<li>fa
 		
 	</li>
 	<li>sol
 		
 	</li>
 	<li>
 		la
 		
 	</li>
 	<li>si
 		
 	</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);
    		}
    	})
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qeF8_size_16_color_FFFFFF_t_70]: /images/20211129/9647d8b76e434106b9ab0687848d79c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9qeF8_size_16_color_FFFFFF_t_70 1]: /images/20211129/3f2453c8dee745b8871539fb6e637c91.png
[20190721210009317.png]: /images/20211129/9df3159d65204095831c37470f2ae8cf.png
[20190721210025457.png]: /images/20211129/add46eb38f65404b96d2ad8cf7536320.png
[https_pan.baidu.com_s_17-jMxkeCb5Xfb7kezY_h8A]: https://pan.baidu.com/s/17-jMxkeCb5Xfb7kezY_h8A