<!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: #D367C
一个简单的网页版钢琴(用到JQuery)
最新推荐文章于 2023-03-16 00:01:39 发布
本文介绍如何利用HTML和JQuery创建一个简单的网页钢琴应用。通过点击网页上的琴键,能够模拟发出不同音符的声音,实现音乐创作的趣味体验。
摘要由CSDN通过智能技术生成