通过键盘事件实现div移动

最新推荐文章于 2023-02-13 22:38:04 发布

z...Z

最新推荐文章于 2023-02-13 22:38:04 发布

阅读量119

点赞数

分类专栏： JS学习

本文链接：https://blog.csdn.net/weixin_43706763/article/details/119549369

版权

JS学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

通过键盘事件实现div移动

    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            position: absolute;
            top: 200px;
            left: 200px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        //获取div的对象节点
        let box = document.querySelector(".box");
        // 使用键盘事件实现div的移动
        document.onkeydown = function (e) {
            // console.log(e.keyCode);
//分别对应着左上右下。
            let code = e.keyCode;
            switch (code) {
                case 37: box.style.left = box.offsetLeft - 5 + "px"; break;
                case 38: box.style.top = box.offsetTop - 5 + "px"; break;
                case 39: box.style.left = box.offsetLeft + 5 + "px"; break;
                case 40: box.style.top = box.offsetTop + 5 + "px"; break;

            }
        }
    </script>
</body

z...Z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通过键盘事件实现div移动

通过键盘事件实现div移动 <style> .box { width: 200px; height: 200px; background-color: skyblue; position: absolute; top: 200px; left: 200px; } </style></he
复制链接

扫一扫