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)+p*;//感觉最好还是写上parseInt，另外，由于offsetLeft是不含p*的，所以不要忘却“p*”}if(toRight){obj.style.left=obj.offsetLeft+a+p*;//不写parseInt也可以，莫非是由于javascript的执行顺次？执行+，再执行+，再执行=？实现结果来看是}if(toTop){obj.style.top=obj.offsetTop-a+p*;}if(toBottom){obj.style.top=obj.offsetTop+a+p*;}},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-inde*为0，而这个的z-inde*就上了它的上面，凭空悬浮在它上面的，可以通过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+p*);//防止底部溢出doc[1]-ob