js键盘操作实现div的移动或改变的原理及代码

千里之行，始于足下。让知识带有温度。第第2页/共2页精品文档推荐js键盘操作实现div的移动或改变的原理及代码js键盘操作实现div的移动或转变的原理及代码

js键盘操作实现div的移动或转变的原理及代码

昨天记录了猎取键盘按键的值的大事，有了值，无非就是针对不同值做不同的操作嘛，而且之前曾经在写贪吃蛇时也用到过。结果一捯饬，又是好久的一段时间，所以感觉有必要记录下的，一方面确有可取之处，另一方面也对自己的提示，刚刚实现过的功能转头又是生疏人了，总的来说，算是温故而知新吧。

这样我们先来分析，要实现键盘操作实现div的移动也许的原理吧：

*要实现div的移动，首先最关键的一点：猎取div对象

*postion：absolute将div完全从文档流中拖出啊，这个地方漏掉了，回去看了贪吃蛇才发觉的.，真晕

*猎取键盘的操作

*依据键盘的不同操作，给出不同响应

这就是我想起的也许需要留意的地方，还是先来看代码：

先是html部分

然后记录下javascript的实际操作

window.onload=function(){varobj=document.getElementById(showZone);//猎取到对象了吧，这最简洁vara=10;vartoLeft=toRight=toTop=toBottom=false;//定义几个boolean型变量，是为了后面方向操作用的，看是四个方向吧varmove=setInterval(function(){//这个地方的move定义实际上毫无意义，只是为了让这个方法更明显一点if(toLeft){obj.style.left=parseInt(obj.offsetLeft-a)+px;//感觉最好还是写上parseInt，另外，由于offsetLeft是不含px的，所以不要遗忘“px”}if(toRight){obj.style.left=obj.offsetLeft+a+px;//不写parseInt也可以，莫非是由于javascript的执行挨次？执行+，再执行+，再执行=？实现结果来看是}if(toTop){obj.style.top=obj.offsetTop-a+px;}if(toBottom){obj.style.top=obj.offsetTop+a+px;}},300);//这个经典的定时器啊，循环执行的大神器，还记得setInterval和settimeout的区分么document.onkeydown=function(event){varevent=event||window.event;switch(event.keyCode){//哈哈，猎取到键盘操作了吧case37:toLeft=true;break;//转变变量，连续执行最初的循环，不让你停不能停啊case38:toTop=true;break;case39:toRight=true;break;case40:toBottom=true;break;}};document.onkeyup=function(event){switch(event.keyCode){case37:toLeft=false;break;//给我变回来，让你停就别动了case38:toTop=false;break;case39:toRight=false;break;case40:toBottom=false;break;}};};

就这样，我们完成了原理分析中的需求，同时也就可以通过上、下、左、右按键来实现div的上下左右移动了，接下来，再来记录下敏感地方吧。

1、div需是absolute的，为这个纠结了半天实在不值得，于是查询了下，了解了一个概念“文档流”，

文档流，通常说是元素从上而下，自左向右进行排列，那么这个元素就是节点元素，浩大的dom啊。还是先来说说其它解释吧，我比较喜爱的是这样来阐述：文档+流，文档顾名思义就是说网页文档，而流则是输出方式，还有的解释说是扫瞄器的解析方式，这个貌似更形象一点，正常的文档流，就似乎是一个平面，而一个元素你把它放在哪了，它就在哪，而浮动、固定定位和相对定位，这里分析absolute，就是重新生成了一个流，脱离了它的父层标签，就似乎之前z-index为0，而这个的z-index就上了它的上面，凭空悬浮在它上面的，可以通过left、top来肆意的挪动它。

也许意思能够明白了，但是感觉有些地方还是没法有效的用语言来表述，而且有些点略微有些模糊，信任随着阅历的累积，我能理解的更深一些。

2、keyCode这里的大写，onkeyup和onkeydown这里的小写，在这个地方也是测试了下才发觉的问题，对于javascript，每个小地方都是大问题啊；

3、switch里的break；这个java里面就常遇到，就不多说了

也许的问题就是以上几点，而你还记得解释的快捷键么，还记得其他快捷键么，这就消失了一个问题，上面做出响应的我们只是针对单个按键，假如我们想用一些快捷键呢，该怎么设置呢？

先来看下代码：

document.onkeydown=function(event){//还是跟上面差不多的代码吧，你看出不同在哪里了么varevent=event||window.event;varbctrl=event.ctrlKey;//在这里switch(event.keyCode){case37:toLeft=true;break;case38:if(bctrl){obj.style.background=yellow;break;}toTop=true;break;//在这里，case39:toRight=true;break;case40:toBottom=true;break;}};

这里遇到了event对象的另一个属性，是在keyCode之外的另一个，ctrlKey，还是大写哦，它的主要功能是检查ctrl按键的状态，其实这样的还有两个：

altKey和shiftKey，分别是对alt按键和shift按键状态的检查，这样知道怎么设个快捷键了吧。

其实假如是我自己写的话，可能这样我就已经很满意了，但是在翻阅搜寻的时候，总能遇到心思缜密的朋友

附上代码，你知道是要做什么么：

functionlimit(){vardoc=[document.documentElement.clientWidth,document.documentElement.clientHeight]//防止左侧溢出obj.offsetLeft=0(obj.style.left=0);//防止顶部溢出obj.offsetTop=0(obj.style.top=0);//防止右侧溢出doc[0]-obj.offsetLeft-obj.offsetWidth=0(obj.style.left=doc[0]-obj.offsetWidth+px);//防止底部溢出doc[1]-obj.offsetTop-obj.offs