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

注意三点：
 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说明：

数字小键盘中对应的上下左右：

posted @   xing.org1^  阅读(5550)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· DeepSeek如何颠覆传统软件测试？测试工程师会被淘汰吗？
点击右上角即可分享
微信分享提示
AI IDE Trae