.102键盘移动div

最新推荐文章于 2024-07-18 10:24:18 发布

sanda_nd

最新推荐文章于 2024-07-18 10:24:18 发布

阅读量82

点赞数

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

本文链接：https://blog.csdn.net/sanda_nd/article/details/124343621

版权

js基础专栏收录该内容

116 篇文章 0 订阅

订阅专栏

通过键盘移动红色方块

<!DOCTYPE html>
<html lang="ch">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>键盘移动div</title>
    <script>
        window.onload = function () {
            var box = document.getElementById('box');
            document.onkeydown = function (event) {
                event = event || window.event;
                /*
                    左 37
                    右 39
                    上 38
                    下 40
                
                */
                var speed=10;
                // ctrl 和方向键按住才有效果 
               if(event.ctrlKey){
                 speed=50;
               }
                switch (event.keyCode) {
                    case 37:

                        box.style.left = box.offsetLeft - speed + 'px';
                        break;
                    case 38:
                        box.style.top = box.offsetTop - speed+ 'px';
                        break;

                    case 39:
                        box.style.left = box.offsetLeft + speed+ 'px';
                        break;
                    case 40:
                        box.style.top = box.offsetTop + speed + 'px';
                        break;
                }
            };
        };

    </script>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <div id="box"></div>
</body>


</html>

sanda_nd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
.102键盘移动div

通过键盘移动红色方块<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l
复制链接

扫一扫