<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>琴鍵</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style>
*,*:after,*:before{
box-sizing: border-box;
padding:0;
margin:0;
border:none;
text-decoration:none;
}
body{
margin: 0 auto;
padding: 0;
text-align: center;
}
#wrap{
width: 1100px;
height: auto;
margin: 0 auto;
background: #F6F5F4;
}
.box{
margin: 68px 50px;
width: 50px;
height: 450px;
position: relative;
border:none;
box-shadow: 0px 1px 3px #333;
cursor: pointer;
margin-left: -35px;
}
.key1{
background: #1FBCE9;
margin-left: 50px;
}
.key2{
background: #53A5EA;
}
.key3{
background: #9288EC;
}
.key4{
background: #C173ED;
}
.key5{
background: #D367C0;
}
.key6{
background: #E45B8F;
}
.key7{
background: #F4505F;
}
</style>
</head>
<body>
<div id="wrap">
<audio id="press1">
<source src="1.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press2">
<source src="2.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press3">
<source src="3.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press4">
<source src="4.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press5">
<source src="5.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press6">
<source src="6.mp3" type="audio/mpeg">
不支持。
</audio>
<audio id="press7">
<source src="7.mp3" type="audio/mpeg">
不支持。
</audio>
<div id="keys">
<button class="box key1" onClick="audioPlay1()" onMouseOver="getOpacity(0)" onMouseOut="resort(0)">1</button>
<button class="box key2" onClick="audioPlay2()" onMouseOver="getOpacity(1)" onMouseOut="resort(1)">2</button>
<button class="box key3" onClick="audioPlay3()" onMouseOver="getOpacity(2)" onMouseOut="resort(2)">3</button>
<button class="box key4" onClick="audioPlay4()" onMouseOver="getOpacity(3)" onMouseOut="resort(3)">4</button>
<button class="box key5" onClick="audioPlay5()" onMouseOver="getOpacity(4)" onMouseOut="resort(4)">5</button>
<button class="box key6" onClick="audioPlay6()" onMouseOver="getOpacity(5)" onMouseOut="resort(5)">6</button>
<button class="box key7" onClick="audioPlay7()" onMouseOver="getOpacity(6)" onMouseOut="resort(6)">7</button>
</div>
</div>
<script>
//點擊時透明度變成原來的50%
function getOpacity(i){
$(".box").eq(i).css("opacity","0.5");
}
function resort(i){
$(".box").eq(i).css("opacity","1");
}
function audioPlay1(){
document.getElementById("press1").play();
}
function audioPlay2(){
document.getElementById("press2").play();
}
function audioPlay3(){
document.getElementById("press3").play();
}
function audioPlay4(){
document.getElementById("press4").play();
}
function audioPlay5(){
document.getElementById("press5").play();
}
function audioPlay6(){
document.getElementById("press6").play();
}
function audioPlay7(){
document.getElementById("press7").play();
}
</script>
</body>
</html>
效果圖