JS中使用上下左右键盘控制元素移动

最新推荐文章于 2023-05-25 15:41:33 发布
最新推荐文章于 2023-05-25 15:41:33 发布
阅读量1.7k 收藏 4
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shaoyahu/article/details/105667012
版权

想要使用js实现操作上下左右键盘控制页面中元素移动，需要解决的问题有，

  • 如何获取按键触发信息
  • 如何使用已触发的按键信息移动元素

元素和样式

    <style>

        #car{

            width: 64px;

            height: 51px;

            background-image: url('选上我最爱的小汽车！');

            background-size: cover;

            position: absolute;

            left: 500px;

            top: 300px;

        }

    </style>

<body>

    <div id="car" ></div>

</body>

使用绝对定位将小汽车的位置布局在页面中间差不多的地方

js代码

    <script>

        window.onload = function(){

            var car = document.getElementById('car');

            document.onkeydown = function(event){

                console.log(event.keyCode);

                switch(event.keyCode){

                    case 37:car.style.left = car.offsetLeft-10+'px';break;

                    case 38:car.style.top = car.offsetTop-10+'px';break;

                    case 39:car.style.left = car.offsetLeft+10+'px';break;

                    case 40:car.style.top = car.offsetTop+10+'px';break;

                }

            }

        }

    </script>

获取按键按下事件

document.onkeydown = function(event){

            console.log(event.keyCode);

}

获取到上下左右分别为38，40，37，39

修改属性时，由于dom.style只能获取行内样式，所以对于

console.log(car.style.left);

这样的式子得到的为空字符串empty string

若是写在行内样式则获得"500px"字符串

而使用dom.offset获得的为数值，直接修改后加上字符串"px"再赋值给dom.style即可

 

不可名状邵雅虎
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2401
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
html键盘控制一串元素移动,【案例】使用上下左右键控制元素的移动
weixin_42186015的博客
06-09 816
使用键盘上下左右键控制小球移动*{margin:0;padding:0;}#ball{width: 200px;height: 200px;background: pink;border-radius: 50%;position: absolute;}//获取元素var ball = document.getElementById('ball');//定义小球每次移动的步径var step = 1...
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery基础知识常用
qq_45796592的博客
12-12 2513
jQuery常用基础知识总结；知识点分类"亲民"；适合0基础
js使页面滚动到特定元素上
weixin_57768308的博客
03-06 2535
使用Element.scrollIntoView()方法
DOM第五天
mumuyuanlinlin的博客
05-05 131
DOM的键盘事件 1.onkeydown事件(键盘按键被按下) // onkeydown 某个键盘按键被按下 针对所有键 oText.οnkeydοwn=function(event){ console.log(“onkeydown事件”); console.log(event); } document.οnkeydοwn=function(event){ console.log(event.keyCode); } 2.onkeyupd事件(键盘按键被松开) // onkeyup 某个键盘按键被松开。 oT
js左右拖动画布、js鼠标左右拖动改变滚动条位置
最新发布
李程程的博客
05-25 1222
js左右拖动画布、js鼠标左右拖动改变滚动条位置、中间绿色画布，鼠标左键长按可以左右拖动
JS实现元素上下左右移动效果
10-19
最后，为了使示例更易理解，还添加了一段提示文本，告诉用户可以使用哪些按键来控制元素移动。 ```html 友情提示：请按键盘上的上下左右键 ``` 总结来说，这个示例主要涉及了以下几个JavaScript和HTML的知识点： ...
JS设置自定义快捷键并实现图片上下左右移动
10-16
在JavaScript中，设置自定义快捷键并实现图片上下左右移动是一项常见的交互功能，尤其是在网页游戏或图像编辑应用中。这个功能允许用户通过键盘上的特定按键或自定义的按键组合来控制图片的位置。以下是对实现这一...
原生js操作dom实现上下左右移动.docx
11-23
在本文中，我们将使用JavaScript来操作DOM，实现上下左右移动的功能。我们将使用getElementsByClassName和getElementsByTagName方法来获取指定的元素，然后使用style属性来设置元素的位置和样式。 首先，我们需要...
js控制图片上下左右移动
07-18
在JavaScript（JS）中，控制图片上下左右移动是网页动态效果的基本实现，广泛应用于网页游戏、交互式设计等场景。本教程将深入讲解如何利用JavaScript实现这一功能。 首先，我们需要在HTML中设置一个图片元素，并为...
qt 实现控件的模拟人类习惯的上下左右控制
weixin_30652879的博客
05-05 312
qt 实现控件的模拟人类习惯的上下左右控制 为了做一个项目是嵌入式开发所以需要按键操作界面，所以需要一个可以模拟人类习惯的上下左右按键的控制。但是qt，不知道为什么keypress不支持上下左右的按键响应，所以在不利用到eventfilter的情况下只能，转换了wsad的四个按键。 算法思想如下：其实也不算是什么算法吧。 有两个主要的函数，一个函数负责获取到任何控件对应主界面的相对位...
纯js实现左右拖动父元素，可以滚动子元素，有惯性效果，复制代码即可使用，拿来即用
mengzhanfei1的博客
12-29 981
纯js实现左右拖动父元素滚动子元素，有惯性效果。复制代码即可使用。拿来即用。
js滚动条滚动到指定元素
GeniusXYT的博客
03-04 9198
this.$nextTick(() => { let item = document.getElementById("card-item"); // 指定的元素 let wrapper = item.parentElement.parentElement; // 其父元素 - 必须是产生滚动条的元素 // el.focus(); // 元素聚焦法定位 ， 有时定位不全， 可用 outline:none; 除去聚焦产生的框; 对于默认没有聚焦的元素需要主动
【案例】JS键盘事件 实现元素上下左右移动效果
qq_57215961的博客
05-20 3976
分享 如何使用JS键盘事件 实现元素上下左右移动的效果 效果：按下键盘上的 上、下、左、右键，元素发生对应方向的移动 低配版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" cont
js之按键控制div移动
m0_67932301的博客
05-22 2682
js之按键控制div移动
[js] 小案例---键盘事件（随着上下左右键移动元素）
qq_14993591的博客
09-10 1022
通过 键盘按键 控制 p标签的位移 上按键 38 p标签 top 累减 数值 下按键 40 p标签 top 累加 数值 左按键 37 p标签 left 累减 数值 右按键 39 p标签 left 累加 数值 数值的改变 应该是 在 原始数值基础上完成的 极值的设定: - 最小值是 0 - 最大值是 父级标签占位(内容+padding) - 当前标签占位(内容+padding+border) clientWidth clientHeight offsetWidth offsetHeig
Jquery实现SELECT多选并且左右上下移动
我心耿耿
11-07 1535
直接贴代码吧：
html上下左右键事件,Js事件案例——上下左右键盘控制div移动
weixin_39563827的博客
06-02 425
描述：div通过键盘事件上下左右实现div块的移动效果： 实现：js：var Method=(function () {return {EVENT_ID:"event_id",loadImage:function (arr) {var img=new Image();img.arr=arr;img.list=[];img.num=0;// 如果DOM对象下的事件侦听没有被删除...
赛车游戏，点击开始漂移, 创建一个新窗口, 窗口里创建一个html元素。通过”控制汽⻋”上下左右。按钮控制元素的移动控制”控制窗口”上下左右按钮控制窗口的移动用js实现
04-14
好的，我可以回答这个问题。你可以使用以下代码来实现： 1. 在HTML页面中添加以下代码创建按钮和窗口： <button onclick="createNewWindow()">开始漂移</button> <div id="newWindow"></div> 2. 在JavaScript文件中创建createNewWindow()函数： function createNewWindow() { // 创建新窗口 let newWindow = window.open("", "", "width=600,height=400"); // 在新窗口中创建元素 let newElement = newWindow.document.createElement("div"); newElement.innerHTML = "新元素"; newWindow.document.getElementById("newWindow").appendChild(newElement); // 配置键盘控制 newWindow.document.addEventListener("keydown", function(event) { if (event.keyCode === 37) { // 左箭头键 newElement.style.left = parseInt(newElement.style.left) - 5 + "px"; } else if (event.keyCode === 38) { // 上箭头键 newElement.style.top = parseInt(newElement.style.top) - 5 + "px"; } else if (event.keyCode === 39) { // 右箭头键 newElement.style.left = parseInt(newElement.style.left) + 5 + "px"; } else if (event.keyCode === 40) { // 下箭头键 newElement.style.top = parseInt(newElement.style.top) + 5 + "px"; } }); // 配置窗口控制 newWindow.document.getElementById("newWindow").addEventListener("keydown", function(event) { if (event.keyCode === 37) { // 左箭头键 newWindow.moveBy(-5, 0); } else if (event.keyCode === 38) { // 上箭头键 newWindow.moveBy(0, -5); } else if (event.keyCode === 39) { // 右箭头键 newWindow.moveBy(5, 0); } else if (event.keyCode === 40) { // 下箭头键 newWindow.moveBy(0, 5); } }); } 这样，当用户点击按钮时，将创建一个新窗口并在其中创建一个div元素。用户可以通过按下箭头键来控制元素和窗口的移动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值