javascript:用键盘移动盒子代码（键盘事件）

最新推荐文章于 2021-12-09 16:36:48 发布
最新推荐文章于 2021-12-09 16:36:48 发布
阅读量162 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/51xzdy/archive/2012/06/05/2535550.html
版权 
 1 <html>
 2 <head>
 3 <title>1</title>
 4 <style type='text/css'>
 5 #box{
 6     width:100px;
 7     height:100px;
 8     position:absolute;
 9     left:300px;
10     top:200px;
11     border:solid 1px green;
12 }
13 </style>
14 </head>
15 <body>
16 <div id='box'></div>
17 <script language='javascript'>
18     //document.getElementById('box').onkeydown 点击div块获得焦点就能响应该事件
19     document.onkeydown=function(){
20         var obj=document.getElementById('box');
21         var left=obj.offsetLeft;
22         var top=obj.offsetTop;
23         var x;
24         var y;
25         switch(event.keyCode){
26             case 37:
27                 x=left-10;
28                 break;
29             case 39:
30                 x=left+10;
31                 break;
32             case 38:
33                 y=top-10;
34                 break;
35             case 40:
36                 y=top+10;
37                 break;
38         }
39         if(x){
40             obj.style.left=x+'px';
41         }
42         if(y){
43             obj.style.top=y+'px';
44         }
45     }
46 </script>
47 
48 </body>
49 </html>

 

转载于:https://www.cnblogs.com/51xzdy/archive/2012/06/05/2535550.html

weixin_30300523
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript#js#利用键盘控制盒子/图片移动（定时器setInterval()和键盘onkeydown()的应用）
weixin_41306215的博客
04-15 743
键盘上下左右控制图片移动 思路： 为了避免物体移动时，第一下和第二下之间的间隔卡顿，将控制物体移动的速度和方向分开 方向：用 setInterval()函数包含switch语句，setInterval()函数每隔一段时间检查该执行哪一个，避免停顿 速度：用onkeydown()函数，利用ctrlkey属性，每按下一次ctrl则会加速一次...
键盘控制盒子移动案例
summer爱前端
01-13 692
通过键盘上的上下左右按键控制一个盒子在页面上移动，并且解决持续按键盒子会有卡顿的问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>div随键盘控制移动</title&gt
event 事件 键盘控制div移动
weixin_34238633的博客
03-12 82
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 100px; height: 100px; ...
JavaScript通过键盘方向键控制盒子移动
戴翔的技术博客
10-12 1123
0. 效果图 1. 实现代码 html <head> <style> .box { position: absolute; width: 100px; height: 100px; top: 100px; left: 100px; background-color: orange; } </style> </head> <body>
js通过键盘操控盒子
hangnan315的博客
06-01 971
js通过键盘操控盒子 步骤 1.键盘按下方向键，可以控制小盒子的移动。 1.1 给谁添加键盘按下事件 document 1.2 如何判断按下的是哪个键键盘事件对象 1.3 如何让小盒子移动 让小盒子绝对定位，按下键盘时，改变它的left/top值。 2.盒子只能在大盒子里面移动。 3.按下方向键的同时，再按下shift键，速度*2 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g
javascript移动的盒子效果代码
10-30
### JavaScript移动的盒子效果代码详解 #### 一、概述 本篇文章将详细介绍一个基于JavaScript实现的方向键控制小方块移动的应用。此应用不仅适合初学者理解DOM操作与事件监听的基本原理，同时也为进阶用户提供了一...
JavaScript利用键盘码控制div移动
10-15
本知识点将详细介绍如何使用JavaScript结合键盘事件，特别是键盘码（keyCode），来控制一个div元素在网页上的移动。 首先，了解一些基本概念。在HTML文档中，可以通过给元素分配id属性来唯一标识一个元素。例如在...
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
10-17
【JavaScript实现盒子跟随鼠标移动与键盘方向键控制】 在网页开发中，我们有时需要创建一些交互性较强的效果，比如让一个元素（如一个红色的盒子）跟随鼠标移动，或者通过键盘的方向键来控制其移动。这涉及到...
javascript移动的盒子效果代码.docx
01-18
这个文档主要讲解了如何使用 JavaScript 实现移动盒子效果的代码，并且讲解了多个知识点，包括使用 JavaScript 实现移动盒子效果、使用方向键掌握小方块的移动、使用 CSS 设置盒子的样式、使用外部 JavaScript 文件...
html移动光标左右上下健,JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例...
weixin_35947010的博客
06-10 757
本文实例讲述了JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动。分享给大家供大家参考，具体如下：1. 盒子跟着鼠标移动content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">Document*{margin:0;padding:0;}div{...
通过键盘控制盒子的移动与缩放
前端在路上
03-26 995
通过键盘控制盒子的移动与缩放 最近在学习键盘事件操作，通过键盘控制一个盒子在屏幕上的移动，主要引用了onkeydown事件，以及定时器以及while，因为在按键盘的时候需要有组合键，所以不能用if else判断。 主要解决方案：1.通过键盘的按键操作可以获取其键值，37向左，38向上，39向右，40向下；先设置其上下左右的值为false,然后通过按键使其变为true,还有组合键ctrlKey,
javascript的键盘控制事件
frjcy的专栏
05-14 921
获取键盘控制事件是实现交互性最有力的方法之一。      　　 首先需要了解的是如何初始化该事件，基本语句如下：      　　 document.onkeydown = keyDown      　　 当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。      　　 捕获键盘事件对于不同的浏览器来说有点困难，我们分别的来学习不同浏览器的实现语句。      　　
用jQuery做拖放和键盘位移
OJoyha的博客
03-30 298
用jQuery做一个用鼠标和键盘控制div移动的特效 这个特效就是页面中有一个div方块，用鼠标拖动改变它的位置，同时也可以用键盘的上下左右键控制它的走向，这个特效在游戏中用的挺多的。这个特效我分为俩部分来实现：分别是鼠标拖动和键盘控制。 鼠标拖动 先设置一个div方块，设置它的宽、高、背景颜色，然后将它的位置设置为绝对定位（position：absolute）。 在鼠标落在div上时，计算出鼠...
js键盘方向键实现盒子移动
日常分享
07-09 3820
&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;style type="text/css"&gt; div{ width:100px; height:100px; background: red; ...
js鼠标双击DIV事件和键盘输入事件
大佐
07-13 3832
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{width:200px;height:20...
每日一个js实例11--上下左右键
lxsm的博客
11-08 211
#box{width: 100px;height: 100px;position: absolute;background:pink;}             function $(id){return document.getElementById(id)};             document.onkeydown=function(e){             
给div添加键盘按键事件
weixin_30379531的博客
03-20 1187
http://www.qttc.net/201311385.html 1. 给div增加contenteditable="true"，是div变成可编辑状态 2.给div增加tabindex="0"tabindex的值是多少都可以，只要有这个属性存在，tabindex的实际作用是用户按tab键时焦点顺序切换的索引设置，结果居然可以解决这个兼容性问题，并且不会影响它本身的功能使用，当你给DIV...
2020-03-16 JS-原生js实现机顶盒页面键盘事件
xumaozeng的博客
03-16 1105
2020-03-16 JS-原生js实现机顶盒页面键盘事件问题描述-bug复现Bug原因以及解决方法 简介：最近做一个电视机顶盒项目，要用到遥控器去实现页面上焦点的移动，来选择产品以及后续操作，遇到的问题是键盘keydown事件在绑定一个div元素后，没有在离开div解除绑定的话，当再次移动到此div上，会出现重复操作的Bug。 问题描述-bug复现 初始化页面，焦点在一个产品上，键盘向下移...
CSS中使盒子移动方法总结
热门推荐
Thekuuuu的博客
12-09 1万+
个人学习CSS时使用盒子移动的方法总结，简单好用～
JavaScript事件处理：键盘事件与事件绑定
JavaScript提供了丰富的事件类型，涵盖了用户操作（如鼠标点击、移动等）和浏览器行为（如页面加载、窗口调整大小等）。理解并熟练运用这些事件和事件处理机制，是构建动态、交互性强的Web应用程序的基础。通过学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值