前端开发 键盘方向键控制移动div

前端开发常用api集合|前端开发从哪里下载素材|web前端开发最佳实践 pdf下载

代码在ie和360浏览器的兼容模式可能有问题。
html 代码

<!doctype html>
<head>
    <meta charset=”utf-8″>
    <title>无标题文档</title>
    <script type=”text/javascript”>
        window.onkeydown = function (e) {
            var block1 = document.getElementById(‘block’);
            var pingwidth = document.body.clientWidth;//获取屏幕宽度
            var pingheight = document.body.clientHeight;//获取屏幕高度
            var en = e || event;
            if (en.keyCode == 37 && block1.offsetLeft > 0) {//键盘左键头事件
                block1.style.marginLeft = block1.offsetLeft – 10 + ‘px’;
            }
            if (en.keyCode == 39 && block1.offsetLeft < pingwidth – 60) {//键盘右键头事件
                block1.style.marginLeft = block1.offsetLeft + 10 + ‘px’;
            }
            if (en.keyCode == 38 && block1.offsetTop > 0) {//键盘上键头事件
                block1.style.marginTop = block1.offsetTop – 10 + ‘px’;
            }
            if (en.keyCode == 40 && block1.offsetTop < pingheight – 60) {//键盘下键头事件
                block1.style.marginTop = block1.offsetTop + 10 + ‘px’;
            }
        }
    </script>
    <style type=”text/css”>
        * {
            margin: 0px auto;
            padding: 0px;
        }
        body,
        html {
            height: 100%;
            overflow: hidden;
        }
        #block {
            width: 50px;
            height: 50px;
            background: #000;
        }
    </style>
</head>
<body>
    <div id=”block”>
    </div>
</body>
</html>

web前端开发常用的英文单词|中国前端开发人员年龄|前端开发人员的规划

» 本文来自:前端开发者 » 《前端开发 键盘方向键控制移动div》
» 本文链接地址:https://www.rokub.com/5203.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!