JavaScript按键拖动

最新推荐文章于 2023-04-10 09:19:08 发布

zmx2029

最新推荐文章于 2023-04-10 09:19:08 发布

阅读量277

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/baidu_25845567/article/details/51638228

版权

PHP 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keydown</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #box{
            width: 200px;
            height: 200px;
            background-color: rebeccapurple;
        }
    </style>
</head>
<body>
    <div id="box" style="position: absolute;left: 0px;top: 0px;"></div>
</body>
<script>
    var box = document.getElementById("box");
    document.body.onkeydown = function (e) {
        var ent = e || window.event;
        switch(ent.keyCode) {
            case 37:
                box.style.left = parseFloat(box.style.left) - 10 + "px";
                break;
            case 38:
                box.style.top = parseFloat(box.style.top) - 10 + "px";
                break;
            case 39:
                box.style.left = parseFloat(box.style.left) + 10 + "px";
                break;
            case 40:
                box.style.top = parseFloat(box.style.top) + 10 + "px";
                break;
            default:
                break;
        }
    }
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zmx2029

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript按键拖动

html lang="en">head> meta charset="UTF-8"> title>keydowntitle> style> *{ margin: 0; padding: 0; } #box{ width: 200px;
复制链接

扫一扫