Jquery实现在线钢琴

最新推荐文章于 2023-11-29 10:26:55 发布

开源首席特技师

最新推荐文章于 2023-11-29 10:26:55 发布

阅读量1.2k

点赞数 3

分类专栏： Jquery 文章标签：前端在线钢琴 jquery

本文链接：https://blog.csdn.net/qq_28919991/article/details/82961042

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

闲来无事用jquery写了个小东西
功能：按键能弹奏钢琴

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴</title>
    <script src="../lib/jquery-1.11.3.min.js"></script>
    <script src="piano.js"></script>
    <link rel="stylesheet" href="piano.css">
</head>
<body>
<p class="copy">制作:老狗滴大爷</p>
<div class="nac">
    <p>《纯节奏》13556515651355654321666646176566664617621355651712323215671</p>
    <br>
    <p>《勇敢的鄂伦春》 5555 35 51 6553 656532 332112 13333 35255 23235652323211</p>
    <br>
    <p>《小鸭子》553355332321 1664466443532 11111161 44456 776 55432345 776 55433221</p>
</div>
<div class="plat">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</div>
<div class="pi">
    <audio src="music/37.mp3" controls></audio>
    <audio src="music/38.mp3" controls></audio>
    <audio src="music/39.mp3" controls></audio>
    <audio src="music/40.mp3" controls></audio>
    <audio src="music/41.mp3" controls></audio>
    <audio src="music/42.mp3" controls></audio>
    <audio src="music/43.mp3" controls></audio>
    <audio src="music/44.mp3" controls></audio>
</div>
</body>
</html>

css部分

*{
    padding: 0;
    margin: 0;
    background-color: #555555;
}
.nac{
    width: 800px;
    border: 1px #8a6d3b solid;
    position: absolute;
    left: 350px;
    color: white;
    font-size: 21px;
    font-family: 楷体;
}
.copy{
    position: absolute;
    left: 50px;
    top: 50px;
    width: 100px;
    font-family: 楷体;
    font-size: 30px;
    color: white;
}
.plat{
    width: 900px;
    position: absolute;
    left: 350px;
    top: 200px;
    transform: perspective(400px) rotateX(30deg);
}
.plat li{
    list-style: none;
    width: 100px;
    height: 300px;
    background-color: white;
    box-shadow: 0 10px 5px rgb(0,0,0,0.7);
    position: relative;
    margin-left: 2px;
    border: 1px #8c8c8c solid;
    float: left;
    transform: perspective(500px) rotateX(-5deg);

}
.pi{
    display: none;
}

js部分

$(function () {
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 65) {
            count = 0;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 83) {
            count = 1;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 68) {
            count = 2;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 70) {
            count = 3;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 74) {
            count = 4;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 75) {
            count = 5;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 76) {
            count = 6;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });
    $(document).keydown(function (e) {
        var key =  e.which;
        if (key == 186) {
            count = 7;
            $("li").eq(count).animate({
                top:2,
                left:2
            },10).animate({
                top:0,
                left:0
            },10);
            $("audio").get(count).load();
            $("audio").get(count).play();

        }
    });

})

音乐资源
百度网盘

开源首席特技师

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
Jquery实现在线钢琴

闲来无事用jquery写了个小东西功能：按键能弹奏钢琴html部分&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;手风琴&lt;/title&gt; &lt;script src=&qu
复制链接

扫一扫