键盘事件移动元素

最新推荐文章于 2022-06-20 15:00:01 发布
最新推荐文章于 2022-06-20 15:00:01 发布
阅读量330 收藏
点赞数
文章标签： button function class cmd border input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shmimm/article/details/6494392
版权

<html>
<title>键盘事件移动元素</title>
<head>
<style type="text/css">
.moveable={position:relative}
</style>
<script language="JavaScript">
var LEFT_ARROW=37;
var UP_ARROW=38;
var RIGHT_ARROW=39;
var DOWN_ARROW=40;

function moveButton()
{
  switch(event.keyCode)
 {
    case(LEFT_ARROW):
  {
              event.srcElement.style.posLeft--;
   break;
  }
    case(UP_ARROW):
  {
event.srcElement.style.posTop--;
   break;
  }
    case(RIGHT_ARROW):
  {
event.srcElement.style.posLeft++;
   break;
  }
    case(DOWN_ARROW):
  {
event.srcElement.style.posTop++;
   break;
  }
 }
}
//新增事件
function addEvent(objButton)
{
objButton.attachEvent("onkeydown",moveButton);
}
</script>
</head>
<body>
<h2 >键盘事件移动元素</h2>
<hr>
<input type="button" value="X" id="cmd1" class="moveable" οnclick="addEvent(this)">
<input type="button" value="Y" id="cmd2" class="moveable" οnclick="addEvent(this)">
<talbe border="1">
<tr><td>__</td><td>__</td><td>__</td></tr>
<tr><td>__</td><td>__</td><td>__</td></tr>
<tr><td>__</td><td>__</td><td>__</td></tr>
</table>
</table>
 </body>
</html>
 

shmimm
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
键盘控制图标移动
07-30
在编程领域，键盘控制图标移动是一项常见的交互设计技术，它涉及到对键盘事件的监听和处理，以及图形用户界面（GUI）元素的动态移动。在这个场景中，我们可以从以下几个知识点进行详细探讨： 1. 键盘事件：键盘事件...
事件——键盘事件，键盘控制物体移动
m0_62903673的博客
05-23 533
键盘事件就是通过按键控制物体移动，我们今天要实现的就是利用上下左右按键实现物体的上下左右移动，甚至斜上下左右。 首先，先创造一个物体。 <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
【EVENT】键盘事件：键盘控制元素移动
m0_50947589的博客
05-22 334
键盘事件实现控制元素移动
键盘事件(键盘控制元素移动)
Sunflower_knight的博客
06-20 382
这次我们来写一个键盘事件(键盘控制元素移动)的案例，就是当你按下上下左右键的时候，页面中的元素会根据你所按的方向进行一个移动 HTML部分 首先我们先设置一个div(元素) CSS部分 然后我们为设置好的元素添加CSS样式使其能在页面中显示出来（可根据自己的需求调整样式） JavaScript部分 JS部分首先我们先写一个页面加载事件，然后通过TagName获取div，这时并为完全获取到div，我们要在其后面加上[i]（div的索引值）才能获取到，然后我们绑定键盘抬起事件，并在后....
键盘事件控制元素移动
huhuhuja
10-12 262
<!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-UA-Compatible" content="ie=edge"> <title>17键盘控制方块运.
键盘控制图片移动事件
1997ysm
05-09 1178
img{ position: absolute; top: 0; left: 0; } img=document.getElementById('imgid'); ys=0;             yv=10;             sx=0;             vx=10; document.onkeydown=function(event)
键盘控制button移动
06-24
本项目"键盘控制button移动"就是一个很好的实例，展示了如何利用QT来响应键盘输入并更新界面上的元素，比如按钮（button）的位置。 首先，我们要理解QT中的键盘事件模型。QT通过信号与槽机制来处理事件，当键盘被按...
jquery 监听 键盘 事件
05-30
例如，要监听页面上所有元素的键盘按键事件，可以这样写： ```javascript $(document).on('keydown', function(event) { console.log('Keycode:', event.keyCode); }); ``` 在这个例子中，`event.keyCode`返回的...
moveplane.rar_键盘 移动_飞机
最新发布
09-22
1. **键盘事件处理**：游戏中的飞机能够根据用户的键盘输入进行移动，这需要用到键盘事件监听。在编程语言如Java或Python中，可以使用特定的库（如Java的`java.awt.event.KeyEvent`或Python的`pygame`）来捕获键盘...
jquery中键盘事件小结
10-22
在本文中，我们将深入探讨jQuery中键盘事件的使用方法，并通过实例讲解来演示如何捕捉键盘按键事件，并对其做出响应。由于这是一个非常实用的话题，开发者们可以利用这些知识来增强网页的交互性。 首先，我们来了解...
js键盘移动事件
兔子骑着乌龟跑
05-17 188
keyboard_box_move <!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">
Java Swing 键盘监听鼠标移动监听
85-专栏
01-23 6214
实现监听接口 鼠标移动要实现MouseMotionListener 如果实现MouseListener就是监听鼠标的点击释放和进入离开 一定要add listener 不然没有监听的对象，就不会有监听事件发生！
鼠标事件 键盘事件
m0_61700036的博客
12-03 1541
一、常用的鼠标事件 鼠标事件 触发条件 onclick onmouseover onmouseoutonfocus onblur onblur onmousemove onmouseup onmousedown
java事件监听学习——通过键盘方向键控制小球移动
Lizhifun
07-25 2万+
//通过键盘方向键控制小球移动 package com.ballMove; import java.awt.*; import javax.swing.*; import java.awt.event.*; public class playBall extends JFrame{ MyPanel mp=null; public static void main(String[] arg
Js-三大事件（鼠标事件、键盘事件、html事件）
热门推荐
qwer_df_b的博客
08-23 9万+
鼠标事件、键盘事件、html事件
史上最全的常用事件：移动端事件及PC端：鼠标/键盘/表单事件
等，你的到来。
11-17 2302
PC端事件 鼠标事件： onclick点击 onmouseover鼠标移入 onmouseout鼠标移出 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动 onmouseenter鼠标移入 onmouseleave鼠标移出 ondblclick鼠标双击 oncontextmenu鼠标
js事件实现通过键盘移动图片
yp320645的博客
08-08 2783
#img1{ position: absolute; left: 0; top: 0; } style> body onkeydown="move(event)"> 鼠标的坐标--> img src="../img/download_logo.png" id="img1"> body> script> var top
键盘移动事件
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
07-14 232
JS-键盘移动事件
weixin_30908103的博客
01-04 78
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘移动div</title> <style> *{margin:0px;padding:0px;} ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值