JS-键盘事件之方向键移动元素

最新推荐文章于 2023-04-24 12:36:25 发布

xing.org1^

最新推荐文章于 2023-04-24 12:36:25 发布

阅读量121

点赞数

文章标签： js javascript css html switch

本文链接：https://blog.csdn.net/xingorg/article/details/120427025

版权

注意三点：
1：事件名称onkeydown。
2：事件加给document，而非window。
3：把元素的top，left值分别用offsetTop，offsetLeft来设定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>键盘移动</title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            h3{
                position: absolute;
                width: 200px;
                background: cadetblue;
                color: #fff;
                padding: 20px;
            }
        </style>
    </head>
    <body>
        <h3 id="h3">
            注意三点：<br />
            1：事件名称onkeydown<br />
            2：事件加给document，而非window。<br />
            3： 把元素的top，left值分别用offsetTop，offsetLeft来设定
        </h3>
        
    </body>

js效果：【这里用了switch语句来进行判断】

<script type="text/javascript">
        window.onload = function(){
            var oH3 = document.getElementById("h3");
            document.onkeydown = function(ev){
                var ev = ev || window.event;
                switch(ev.keyCode){
                    case 37:
                    case 100:
                        oH3.style.left =  oH3.offsetLeft - 10 + "px";
                    break;
                    case 38:
                    case 104:
                        oH3.style.top = oH3.offsetTop - 10 + "px";
                    break;
                    case 39:
                    case 102:
                        oH3.style.left = oH3.offsetLeft + 10 + "px";
                    break;
                    case 40:
                    case 98:
                        oH3.style.top = oH3.offsetTop + 10 + "px";
                    break;
                    default:
                        console.log("请按上下左右键");
                    break;
                }
                console.log(oH3.offsetTop+"+"+oH3.style.top);
                console.log(ev.keyCode);
                
            }
        }
    </script>

键值 keyCode说明：