jquery实现钢琴按键

时间 2019-12-06 标签 jquery 实现钢琴按键

HTML

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">导航一</a>
                <span></span>
            </li>
            <li>
                <a href="#">导航二</a>
                <span></span>
            </li>
            <li>
                <a href="#">导航三</a>
                <span></span>
            </li>
            <li>
                <a href="#">导航四</a>
                <span></span>
            </li>
            <li>
                <a href="#">导航五</a>
                <span></span>
            </li>
        </ul>
    </div>
</body>

CSS

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
a{
    text-decoration: none;
}
.nav{
    width: 500px;
    height: 60px;
    background-color: black;
    margin: 0 auto;

}
.nav li{
    width: 100px;
    height: 60px;
    line-height: 60px;
    float: left;
    position: relative;
    overflow: hidden;

}
.nav a{
    position: absolute;
    width: 100%;
    height: 100%;
    font-size: 24px;
    color: blue;
    text-align: center;
    z-index: 100;
}
.nav span{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: yellow;
    top: 60px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
            $(".nav li").mouseenter(function () {
               $(this).children("span").stop().animate({top:0});
            }).mouseleave(function () {
                $(this).children("span").stop().animate({top:60});
            });
            // 按下1-9这几个数字键，能触发对应的mouseenter事件
            $(document).on("keydown",function (e) {
                // 获取对应按下的键
                var code = e.keyCode;
                if (code >= 49 && code <= 57) {
                    // 触发对应的li的mouseenter事件
                    $(".nav li").eq(code - 49).mouseenter();
                }
            });
                $(document).on("keyup",function (e) {
                    // 获取对应按下的键
                    var code = e.keyCode;
                    if (code >= 49 && code <= 57) {
                        // 触发对应的li的mouseleave事件
                        $(".nav li").eq(code - 49).mouseleave();
                    }
                });
            });
    </script>