JavaScript键盘上下键控制移动

最新推荐文章于 2023-11-18 23:34:40 发布

西红柿炒番茄AB

最新推荐文章于 2023-11-18 23:34:40 发布

阅读量6.7k

点赞数 3

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/a_sid/article/details/53439358

版权

前端专栏收录该内容

35 篇文章

订阅专栏

<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #did {
                width: 400px;
                height: 400px;
                background-color: red;
                position: relative;
                overflow: hidden;
            }

            #mid {
                width: 50px;
                height: 50px;
                background-color: green;
                top: 200px;
                left: 150px;
                position: absolute;
            }
        </style>

    </head>

    <body>
        <h2>键盘上下键控制移动</h2>
        <div id="did">
            <div id="mid">

            </div>
        </div>

        <script type="text/javascript">
            //通过id获取mid
            var mid = document.getElementById("mid");
            //给mid设置事件的监听
            window.document.onkeydown = function(ent) {
                var event = ent || window.event;
                switch(event.keyCode) {
                    case 37: //左
                        mid.style.left = Math.max(0, mid.offsetLeft - 5) + "px";
                        break;
                    case 38: //上
                        mid.style.top = Math.max(0, mid.offsetTop - 5) + "px";
                        break;
                    case 39: //右
                        mid.style.left = Math.min(350, mid.offsetLeft + 5) + "px";
                        break;
                    case 40: //下
                        mid.style.top = Math.min(350, mid.offsetTop + 5) + "px";
                        break;

                }
            }
        </script>

    </body>

</html>

这里写图片描述