Jquery实现在线钢琴

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

html部分

    
    
    
    
    


制作:老狗滴大爷

    
《纯节奏》13556515651355654321666646176566664617621355651712323215671
    

    
《勇敢的鄂伦春》 5555 35 51 6553 656532 332112 13333 35255 23235652323211
    

    
《小鸭子》553355332321 1664466443532 11111161 44456 776 55432345 776 55433221


    

    

    

    

    

    

    

    



    
    
    
    
    
    
    
    

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();

        }
    });

})

音乐资源
百度网盘