用JS键盘事件来移动图片

最新推荐文章于 2024-04-23 18:52:22 发布
最新推荐文章于 2024-04-23 18:52:22 发布
阅读量4k 收藏 11
点赞数 4
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_66128311/article/details/124224853
版权

开发工具与关键技术： VS 2019/JS

作者：唐嘉怡

撰写时间：2022/4/18

小时候都玩过下水道修理工的游戏吧，那其实是一个很简单的小游戏，用简单的JS技术就可以实现，现在我来示范一下最简单的用键盘来移动图片。

首先，要创建新的文件夹，来装载图片和代码。

  

                ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        

 

然后，将图片链接进代码里。

接着，给图片设置样式。

之后，便开始了敲JS部分的代码。先获取各类id名，接着开始写键盘监听事件。

再接着，获取键盘码还有写事件对象兼容

最后，来一个if，else循环。

怎么样，是不是很简单，这就是有手就行。

这是我所学到的用JS键盘事件来控制图片移动，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！

嗑CP一线专员
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
javascript下用键盘控制层的移动的代码
10-30
javascript下用键盘控制层的移动的代码
js实现图片移动
热门推荐
一起摆摊啊
02-23 1万+
图片在指定范围内移动 图片在指定范围内移动，配上合适和图片和背景，就可以完成好看的动态页面。 其实就是一张猫行走的动图，再配上黄色的背景色。 <body style="background-color:rgba(255,216,0,1.00)"> //背景颜色 <img src="image/cat1.gif" id="img1"> //动态图片 <i
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）
03-19
JS五张连篇，点击左右按钮可以移动！（图片左右滚动特效）主要用于想实现图片左右能滚动，点击左右按钮图片可以移动！！不错的！
js实现键盘控制图片的移动
07-26
function test(id){ alert(id); } if(typeof GetControlundefined) GetControl=function (id) { return document.getElementById(id); }; function KeyDown() { var control=document.getElementById("dSquare"); var key; try{ key=event.keyCode; //取得键盘Code编号 } catch(a){ //对于Firefox来说，不支持event.keyCode key=KeyDown.arguments[0].keyCode; } switch(key) { case 40://40 down if(parseInt(control.style.top)<=100){ control.style.top=(parseInt(control.style.top)+1)+'px'; }else{alert('不可以再前行啦')} break; case 39://39 right control.style.left=(parseInt(control.style.left)+1)+'px'; break; case 38://38 up control.style.top=(parseInt(control.style.top)-1)+'px'; break; case 37://37 left control.style.left=(parseInt(control.style.left)-1)+'px'; break; } } document.onkeydown=KeyDown; //附加事件 document.onkeypress=KeyDown; //附加事件
js键盘事件实现人物的行走
10-15
主要为大家详细介绍了js键盘事件实现人物的行走，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js特效-跟随鼠标的小红心
qq_41670147的博客
11-30 916
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
教你用JavaScript实现键盘控制小方块移动
小院里的霍大侠
12-14 2043
关注我，学习更多简单易懂的编程实战案例。进主页获取更多编程/就业/副业/创业/资源。
canvas 方向键控制图片流畅移动
jhs的博客
05-24 155
requestanimationframe、keydown、keyup的使用 首选创建画布 <canvas id="canvas" width="700" height="600"></canvas> 获取画布 var canvas = document.getElementById('canvas'); var context = canvas.getContex...
JS设置自定义快捷键并实现图片上下左右移动
10-16
主要介绍了JS设置自定义快捷键并实现图片上下左右移动,文中通过使用自定义热键或者使用键盘上下左右键移动图片，以此来实现此功能，需要的朋友可以参考下
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js控制图片上下左右移动
07-18
js控制一个图片上下左右移动，网页游戏最基本的入门代码。
js按比例缩放图片且垂直居中显示图片
04-18
NULL 博文链接：https://vipshow.iteye.com/blog/1848912
js 实现 用键盘控制图片移动
03-30
js 实现 用键盘控制图片移动! 值得下载看看!资源免费,大家分享!!
mybatisPlus使用MetaObjectHandler对字段进行更新
最新发布
m0_56356631的博客
04-23 340
都是符合我们的预期的。
string模拟实现
m0_73969414的博客
04-23 1444
c++中string的模拟实现，面试必会知识点
实现自定义注解、实现自定义幂等性注解
qq_44721738的博客
04-23 609
添加 Spring AOP 依赖。创建自定义注解。创建一个新的 Java 注解类，通过@interface关键字来定义，并可以添加元注解以及属性。@Target(ElementType.METHOD) //表示作用于方法上@Retention(RetentionPolicy.RUNTIME) // 表示这个注解在运行时是可见的，这样 AOP 代理才能在运行时读取到这个注解编写 AOP 拦截（自定义注解）的逻辑代码。@Aspect@Component// 方法执行前的处理。
js键盘事件：通过方向键，移动盒子。
06-12
好的，可以通过监听键盘事件来实现这个功能。以下是一个简单的实现： HTML 代码： ```html <div id="box"></div> ``` CSS 代码： ```css #box { width: 50px; height: 50px; background-color: red; position: absolute; left: 0; top: 0; } ``` JavaScript 代码： ```javascript const box = document.getElementById('box'); let left = 0; let top = 0; document.addEventListener('keydown', (event) => { switch (event.keyCode) { case 37: // 左箭头 left -= 10; box.style.left = left + 'px'; break; case 38: // 上箭头 top -= 10; box.style.top = top + 'px'; break; case 39: // 右箭头 left += 10; box.style.left = left + 'px'; break; case 40: // 下箭头 top += 10; box.style.top = top + 'px'; break; } }); ``` 这段代码会监听整个文档的键盘事件，当用户按下方向键时，会根据不同的键码值来判断是左、上、右还是下的方向键，然后分别更新盒子的位置。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值