東奧會，我們用代碼寫個在線鋼琴給奧運健兒加油！｜ 8月更文挑戰

前言：東奧會如火如荼的舉行，去不了現場，我們動動手指，彈奏一首《萬疆》健兒加油打氣！

效果預覽

可支持鼠標滑過及鍵盤點擊事件，可看到鍵盤對應的地方滑動上去，發出對應的音節

技術介紹及資源準備

Ⅰ. jQuery.js（yyds）
Ⅱ. 1-7音節的mp3資源
Ⅲ. 樂譜 Ⅳ. H5的play方法： play 方法是H5提供的，jq並無封裝對應的方法，因此須要將jq對象轉成dom對象

鍵盤事件實現思路：

1.給鍵盤數字1-7註冊keydown，觸發對應的nav的li的mouseenter
2.給鍵盤數字1-7註冊keyup，觸發對應的nav的li的mouseleave

HTML代碼部分以下

<div class="nav">
        <ul>
            <li><a href="javascript:void(0);">1</a><span></span></li>
            <li><a href="javascript:void(0);">2</a><span></span></li>
            <li><a href="javascript:void(0);">3</a><span></span></li>
            <li><a href="javascript:void(0);">4</a><span></span></li>
            <li><a href="javascript:void(0);">5</a><span></span></li>
            <li><a href="javascript:void(0);">6</a><span></span></li>
            <li><a href="javascript:void(0);">7</a><span></span></li>
        </ul>
        <div class="maps">
            <img src="萬疆.jpg" alt="">
        </div>
        <div class="mp3">
            <audio src="mp3/1.mp3"></audio>
            <audio src="mp3/2.mp3"></audio>
            <audio src="mp3/3.mp3"></audio>
            <audio src="mp3/4.mp3"></audio>
            <audio src="mp3/5.mp3"></audio>
            <audio src="mp3/6.mp3"></audio>
            <audio src="mp3/7.mp3"></audio>
        </div>
    </div>
    <script src="../jquery-1.12.4.js"></script>
    
複製代碼

實現點擊樂譜便循環切換功能：

var index = 0;
        var arrs = ["1.jpg", "萬疆.jpg", "3.jpg"];
        $(".maps img").click(function() {
            index++;
            if (index === arrs.length) {
                index = 0;
            }
            $(this).attr("src", arrs[index])
        })

複製代碼

鼠標事件 - 音節動畫功能實現

給nav下的全部的li註冊mouseenter事件， 讓當前li下的span作自定義動畫，top=0，播放對應的音頻
給nav下的全部的li註冊mouseleave事件， 讓當前li下的span作自定義動畫，top=60

$(".nav li").mouseenter(function() {
            // stop() 保證中止當前正在執行的動畫，讓添加的動畫當即執行
            $(this).children("span").stop().animate({ top: 0 });
            // 找到當前元素的下標
            var idx = $(this).index();
            // 需讓讓鼠標通過的時候，從新開啓這個音頻文件的播放
            $(".mp3 audio").get(idx).currentTime = 0;
            $(".mp3 audio").get(idx).play();
        })
        $(".nav li").mouseleave(function() {
            // stop() 保證中止當前正在執行的動畫，讓添加的動畫當即執行
            $(this).children("span").stop().animate({ top: 60 });
        })
複製代碼

鍵盤事件 - 音節動畫功能實現

實現思路：給鍵盤數字1-7註冊keydown，觸發對應的nav的li的mouseenter
給鍵盤數字1-7註冊keyup，觸發對應的nav的li的mouseleave

$(document).keydown(function(e) {
            var keyCode = e.keyCode;

            // 更簡潔的方法去實現
            if (keyCode <= 55 && keyCode >= 49) {
                // 說明按鍵是數字1-7
                // 這個index就是li的下標
                var index = keyCode - 49;

                // 找到對應下標的li，觸發mouseenter事件
                $(".nav li").eq(index).trigger("mouseenter");
            }
        });

        // 註冊鍵盤彈起事件
        $(document).keyup(function(e) {
            var keyCode = e.keyCode;

            // 更簡潔方式去實現功能
            if (keyCode <= 55 && keyCode >= 49) {
                // 鍵盤碼就是數字1-7

                // index 就是li對應的下標
                var index = keyCode - 49;

                // 找到對應下標的li，去觸發他的mouseleave事件
                $(".nav li").eq(index).trigger("mouseleave");
            }
         }
複製代碼

至此，在線鋼琴製做完畢，掘友們，有須要資源的自取。3asy

總結

國家愈來愈強大，這也是每一箇中國人的自信，讓咱們爲奧運健兒加油，國家必定會愈來愈強！！！