JavaScript键盘上下键控制移动

最新推荐文章于 2022-01-13 14:49:37 发布

西红柿炒番茄AB

最新推荐文章于 2022-01-13 14:49:37 发布

阅读量6.6k

点赞数 3

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

本文链接：https://blog.csdn.net/a_sid/article/details/53439358

版权

前端专栏收录该内容

35 篇文章 0 订阅

订阅专栏

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

这里写图片描述

西红柿炒番茄AB

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
JavaScript键盘上下键控制移动

<html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #did { width: 400px; height: 400px; b
复制链接

扫一扫