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

第 第 PAGE 1 页 共 NUMPAGES 1 页 js键盘操作实现div的移动或改变的原理及代码 　　这样我们先来分析，要实现键盘操作实现div的移动大略的原理吧：　　*要实现div的移动，首先最关键的一点：猎取div对象　　*postion：absolute将div完全从文档流中拖出啊，这个地方漏掉了，回去看了贪吃蛇才发觉的.，真晕　　*猎取键盘的操作　　*依据键盘的不同操作，给出不同响应　　这就是我想起的大略需要留意的地方，还是先来看代码：　　先是html部分　　然后记录下javascript的实际操作　　window.onload=function(){ var obj=document.getElementById(showZone);//猎取到对象了吧，这最简约 var a=10; var toLeft=toRight=toTop=toBottom=false;//定义几个boolean型变量，是为了后面方向操作用的，看是四个方向吧 var move=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){ var event=event||window.event; switch(event.keyCode){ //哈哈，猎取到键盘操作了吧 case 37:toLeft=true;break;//转变变量，继续执行最初的循环，不让你停不能停啊 case 38:toTop=true;break; case 39:toRight=true;break; case 40:toBottom=true;break; } }; document.onkeyup=function(event){ switch(event.keyCode){ case 37:toLeft=false;break;//给我变回来，让你停就别动了 case 38:toTop=false;break; case 39:toRight=false;break; case 40: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里面就常遇到，就不多说了　　大略的问题就是以上几点，而你还记得说明的快捷键么，还记得其他快捷键么，这就涌现了一个问题，上面做出响应的我们只是针对单个按键，假如我们想用一些快捷键呢，该怎么设置呢？