07.30《jQuery》——2.2使用键盘上下左右键控制div框

Posted justlive-tears

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了07.30《jQuery》——2.2使用键盘上下左右键控制div框相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #bbb {
                height: 300px;
                width: 300px;
                background-color: aliceblue;
                position: relative;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            $(function() {

                $("#left").click(function() {
                    $("div:not(:animated)").animate({
                        left: "-=100"
                    }, 50);
                });
                $("#right").click(function() {
                    $("div:not(:animated)").animate({
                        left: "+=100"
                    }, 50);
                });
                $("#up").click(function() {
                    $("div:not(:animated)").animate({
                        top: "-=100"
                    }, 50);
                });
                $("#down").click(function() {
                    $("div:not(:animated)").animate({
                        top: "+=100"
                    }, 50);
                });
            })
            $(document).keydown(function() {
                if(event.keyCode == ‘37‘) {
                    $("div:not(:animated)").animate({
                        left: "-=100"
                    }, 50);
                }
                if(event.keyCode == ‘39‘) {
                    $("div:not(:animated)").animate({
                        left: "+=100"
                    }, 50);
                }
                if(event.keyCode == ‘38‘) {
                    $("div:not(:animated)").animate({
                        top: "-=100"
                    }, 50);
                }
                if(event.keyCode == ‘40‘) {
                    $("div:not(:animated)").animate({
                        top: "+=100"
                    }, 50);
                }
            })
        </script>
    </head>

    <body>
        <button id="left">left</button>
        <button id="right">right</button>
        <button id="up">up</button>
        <button id="down">down</button>
        <div id="bbb"></div>

    </body>

</html>

代码通过添加keydown方法，实现通过键盘操作div框移动的功能。

技术分享图片

 

以上是关于07.30《jQuery》——2.2使用键盘上下左右键控制div框的主要内容，如果未能解决你的问题，请参考以下文章

07.30《jQuery》——1.3绑定事件处理函数

07.30《jQuery》——2.1div框的移动

07.30《jQuery》——2.1隔行换色_简单的选择器练习

07.30《jQuery》——1.2$(document).ready()和window.onload区别

使用 jQuery 的上/下/左/右键盘导航？

jQuery 虚拟键盘 - 设置左箭头和右箭头