js中通过键盘上下左右移动图片

第一种方法

<!-- <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style></style>
<body><img style="left:0px" src="./html-01/images/房子.png" alt=""><script>let img=document.querySelector('img')document.onkeyup = function(event){if (event.keyCode==37) {img.style.left = img.offsetLeft-20+"px";}else if (event.keyCode==38){img.style.top = img.offsetTop-20+"px";}else if (event.keyCode==39){img.style.left = img.offsetLeft+20+"px";}else if (event.keyCode==40){img.style.top = img.offsetTop+20+"px";}} --><!-- </script></body>  --><!-- </html>

第二种方法，

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>img{position: absolute;display: none;transition: display 2s;}
</style>
<body><img style="left:0px;top: 0px;" src="./html-01/images/房子.png" alt=""> --><!-- <script> document.onkeyup=function(event){console.dir(event.keyCode)if(event.keyCode==39){let img=document.querySelector('img')let currentLeft=img.style.left;let index=currentLeft.lastIndexOf('px')currentLeft=currentLeft.substring(0,index)img.style.left=(parseInt(currentLeft)+30)+'px'}else   if(event.keyCode==40){let img=document.querySelector('img')let currenttop=img.style.top;let index=currenttop.lastIndexOf('px')currenttop=currenttop.substring(0,index)img.style.top=(parseInt(currenttop)+30)+'px'}    else   if(event.keyCode==37){let img=document.querySelector('img')let currentLeft=img.style.left;let index=currentLeft.lastIndexOf('px')currentLeft=currentLeft.substring(0,index)img.style.left=(parseInt(currentLeft)-30)+'px'} else if(event.keyCode==38){let img=document.querySelector('img')let currenttop=img.style.top;let index=currenttop.lastIndexOf('px')currenttop=currenttop.substring(0,index)img.style.top=(parseInt(currenttop)-30)+'px'}} --><!-- </script> -->

【 js中通过键盘上下左右移动图片】相关推荐

layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列
layui table 可编辑单元格 JS实现通过键盘上下左右键光标焦点移动到旁边的编辑行/列类似效果上下左右键实现的代码 layui.config({base: '/static/layuia ...
JS实现用键盘上下左右键移动页面的div进行移动，并且不能移出页面
<style>#box {width: 200px;height: 200px;background-color: red;position: fixed;} </style> ...
mfc 怎么让键盘上下左右控制图片移动_[源码和文档分享]基于MFC的陨石撞飞机游戏设计与实现...
摘要用MFC设计一个陨石撞飞机的平面游戏,陨石不断下落,飞机通过键盘的上下左右键移动以躲避陨石.当陨石撞到飞机时,显示游戏结束提示对话框.设计开始要对开发环境VC 6.0的熟悉,需要学会如何添加资 ...
JS中的键盘事件（onkeydown、onkeyup、keyCode）
键盘事件: okeydown:键盘被按下,如果一直按着键盘的按键,则okeydown事件会一直被触发. - 当键盘按键一直被按住的时候,事件被连续触发,第一次和第二次以及后面的n次之间,触发的时间间隔 ...
JS中常用的键盘事件与keycode属性
JS中的键盘事件与keycode属性键盘事件键盘事件与鼠标事件类似,同样常出现在开发过程中. 简单介绍三个常见的键盘事件 keydown (识别所有键) keyup (识别所有键) keypres ...
JS 中实现扫码枪使用 [JavaScript,jQuery,一维扫码]
前言: 首先是条码扫描头在设备管理器中可以看到就是一个键盘设备. 然后屏幕也是个光源,扫描枪不能扫屏幕,条码打印到纸上就行了. 然后各家厂商都可以设置扫描结果设置自定义前缀后缀,搜索设备型号找到文档, ...
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
Qt键盘事件实现图片在窗口上下左右移动
Qt键盘事件实现图片在窗口上下左右移动标签(空格分隔): 键盘事件一.项目内容: 新建桌面应用程序testKeyEvent,类名KeyEvent,基类QWidget,通过重写键盘事件到达操作的键盘 ...
vue样式引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档静态资源可以通过两种方式进行处理: 在 Jav ...

【 js中通过键盘上下左右移动图片】

js中通过键盘上下左右移动图片

【 js中通过键盘上下左右移动图片】相关推荐

最新文章

热门文章