前言：东奥会如火如荼的举行，去不了现场，咱们动动手指，弹奏一首《万疆》健儿加油打气！

效果预览

可支持鼠标滑过及键盘点击事件，可看到键盘对应的地方滑动上去，发出对应的音节

技术介绍及资源准备

Ⅰ. 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

总结

国家越来越强大，这也是每个中国人的自信，让我们为奥运健儿加油，国家一定会越来越强！！！