js按键移动div

最新推荐文章于 2020-12-20 08:52:41 发布
最新推荐文章于 2020-12-20 08:52:41 发布
阅读量588 收藏
点赞数
分类专栏： html/html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/morning_itc/article/details/38109771
版权 
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>通过键盘移动图像</TITLE>
<STYLE type="text/css">
body {
 background-image: url(images/game.jpg);
 background-repeat: repeat-y;
}
</STYLE>
<script type="text/javascript">
var advman = 0;
 function init()
 {
  advman = document.getElementById("man").style.pixelTop;
 }
 function move(event)
 {
	e = event||window.event;
	var obj = document.getElementById("man");
 if(e.keyCode==38)//up
  obj.style.top=obj.offsetTop-20+"px"; 
 if(e.keyCode==40)//down
  obj.style.top=obj.offsetTop+20+"px"; 
 if(e.keyCode==37)//left
  obj.style.left=obj.offsetLeft-20+"px"; 
 if(e.keyCode==39)//right
   obj.style.left=obj.offsetLeft+20+"px"; 
 }
 document.οnkeydοwn= move ;
</script>
</HEAD>
<BODY>
<DIV id="man" style="position:absolute;left:500px;top:300px;width:100px;height:100px;z-index:1;background:red;"></DIV>
</BODY>
</HTML>

qcxl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现键盘控制DIV移动的方法
10-24
接下来，我们需要使用JavaScript来监听键盘事件，并根据按键的不同来改变DIV的位置。这通常需要使用`window.onkeydown`和`window.onkeyup`事件监听器来实现。JavaScript代码部分如下： ```javascript window.onload...
js之按键控制div移动
m0_67932301的博客
05-22 2699
js之按键控制div移动
web前端练习23----js中延时执行函数setInterval()和setTimeout() 案例：倒计时，大小动画平移动画，轮播图
翟浩浩Android专栏
10-16 1190
文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setInterval https://developer.mozilla.org/zh-CN/docs/Web/API/Window/setTimeout setInterval(); 定时执行函数setInterval无限次的执行，要通过clearInterva...
键盘移动div
weixin_30730053的博客
07-28 171
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 /*...
简单的JS 通过点击按钮实现DIV左右移动
weixin_33825683的博客
05-24 5015
<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> #d2 { width: 100px; c...
JS-案例-键盘按键移动div
Joker.M的博客
06-04 401
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; he...
JavaScript利用键盘码控制div移动
11-21
-- JavaScript代码用于处理键盘事件并控制div移动 --> <script type="text/javascript"> var oBox = document.getElementById("box"); // 获取div元素 var x = 0; // 初始化div的x坐标 var y = 0; // 初始化div...
jQuery实现div跟随鼠标移动
10-19
通过这些事件，我们可以监控鼠标的位置变化，并根据位置变化移动div。 #### 3. 获取鼠标位置 要实现div跟随鼠标移动的功能，首先需要获取鼠标的位置。可以通过鼠标事件对象e的`pageX`和`pageY`属性获取当前鼠标...
原生js实现键盘控制div移动且解决停顿问题
10-20
在探讨如何使用原生JavaScript（js）来实现通过键盘控制一个div元素移动的过程中，我们...当方向键被释放，定时器中的检查将停止移动div。这样就实现了在按下方向键时div能够平滑地移动，而不会出现初始的停顿现象。
js实现坦克大战 javascript
03-02
本项目中，我们利用JavaScript实现了一个简单的坦克大战游戏，玩家可以通过键盘控制坦克移动和发射炮弹。 首先，我们要了解JavaScript中的按键事件。在JavaScript中，我们可以使用`addEventListener`方法来监听键盘...
js怎么把按钮往下移_按钮控制div上下移动
weixin_39853843的博客
12-20 1056
无标题文档ul,li{margin:0;padding:0}#scrollDiv{width:300px;height:100px;min-height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}#scrollDiv li{height:25px;padding-left:10px;}(function($){$.fn....
有用的javascript
wenldJAVA的专栏
05-27 666
1、保证输入框中只能输入数字：onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
Js事件案例——上下左右键盘控制div移动
进击的葱
12-25 4309
描述： div通过键盘事件上下左右实现div块的移动 效果：     实现： js： var Method=(function () { return { EVENT_ID:"event_id", loadImage:function (arr) { var img=new Image(); ...
简约美观的应届毕业生JAVA程序员求职简历模板.zip
08-27
java 简约美观的应届毕业生JAVA程序员求职简历模板.zip
大学计算机专业参考书目.pdf
08-27
本资料包含了大学计算机专业大一到大四学年专业参考书目。
电气工程及其自动化专业【毕业设计 文献综述 开题报告】三维运动平台控制系统的硬件设计（可编辑）.doc
最新发布
08-27
电气工程及其自动化专业【毕业设计 文献综述 开题报告】三维运动平台控制系统的硬件设计（可编辑）.doc
全新转转交易猫自带客服多模板全开源完整定制版源码
08-27
定制版全开源完整无授权 商品发布； 请在后台商品添加成功后， 再点击该商品管理，可重新编辑当前商品的所有信息及配图以及支付等等相关信息 可点击分享或者跳转，将链接地址进行发布分享 请在手机端打开访问 访问商品主要模板文件路径目录 咸鱼; http://你的域名地址/Xianyu_goods/ 代练妈妈;http://你的域名地址/dlmm/ 大麦商品;http://你的域名地址/dm/dzpj.php 大麦售票;http://你的域名地址/dm/dzp.php 交易猫; http://你的域名地址/jym/ QQ卡框工具;http://你的域名地址/kk/ 京东; http://你的域名地址/www.jd.com/index1.php 转转;http:/ 安装教程； 环境； PHP版本5.6，数据库版本MySQL 5.6 第一步源码上传解压 第二步找到config文件夹找到Conn.php修改数据库 第三步导入数据库sql.sql 第四步http://域名/wuyun.php登录后台 默认登录后台账号及密码； 默认账号；admin 默认密码；123456 源码内附详细搭建教程TXT文档
Unity项目增加字体裁剪
08-27
字体裁剪工具
算法工程师深度学习算法面试题笔记100道题.docx
08-27
结合自己多年算法工程师面试经验和工作经验积累一些面试题，可以参考一下。涉及神经网络底层原理、大模型、transformers等等
使用js+css+html实现，按键移动div 效果
06-08
好的，以下是使用 JavaScript、CSS 和 HTML 实现按键移动 div 的代码示例： HTML 代码： ```html <div id="myDiv">移动我</div> ``` CSS 代码： ```css #myDiv { width: 100px; height: 100px; background-color: red; position: absolute; top: 0; left: 0; } ``` JavaScript 代码： ```javascript var myDiv = document.getElementById("myDiv"); document.addEventListener("keydown", function(event) { var top = parseInt(myDiv.style.top); var left = parseInt(myDiv.style.left); switch (event.keyCode) { case 37: // left arrow key myDiv.style.left = (left - 10) + "px"; break; case 38: // up arrow key myDiv.style.top = (top - 10) + "px"; break; case 39: // right arrow key myDiv.style.left = (left + 10) + "px"; break; case 40: // down arrow key myDiv.style.top = (top + 10) + "px"; break; } }); ``` 这段代码使用了 JavaScript 的事件监听器来捕捉键盘按键事件。在按下箭头键时，根据按下的键码来移动 div 元素的位置，从而实现按键移动 div 的效果。 注意：这段代码假设 div 元素的初始位置为左上角，如果您的 div 元素初始位置不同，请在 CSS 中适当调整 top 和 left 属性的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值