实现键盘操作实现div的移动,最关键的一点:获取div对象,下面有个不错的示例,大家可以参考下

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

这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧:

*---要实现div的移动,首先最关键的一点:获取div对象

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

*---获取键盘的操作

*---根据键盘的不同操作,给出不同响应


这就是我想起的大概需要注意的地方,还是先来看代码:

先是html部分

<div style="width: 50px;height: 50px;background-color: cyan;position: absolute;" id="showZone">


然后记录下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)+"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){ 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-index为0,而这个的z-index就上了它的上面,凭空悬浮在它上面的,可以通过left、top来肆意的挪动它。

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

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

3、switch里的break;这个java里面就常碰到,就不多说了

大概的问题就是以上几点,而你还记得注释的快捷键么,还记得其他快捷键么,这就出现了一个问题,上面做出响应的我们只是针对单个按键,如果我们想用一些快捷键呢,该怎么设置呢?

先来看下代码:

document.onkeydown=function(event){//还是跟上面差不多的代码吧,你看出不同在哪里了么 var event=event||window.event; var bctrl=event.ctrlKey;//在这里 switch(event.keyCode){ case 37:toLeft=true;break; case 38:if(bctrl){obj.style.background="yellow";break;}toTop=true;break;//在这里, case 39:toRight=true;break; case 40:toBottom=true;break; } };


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

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

其实如果是我自己写的话,可能这样我就已经很了,但是在翻阅搜索的时候,总能碰到心思缜密的朋友

附上代码,你知道是要做什么么:

function limit(){ var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight] //防止左侧溢出 obj.offsetLeft <=0 && (<span style="font-family: Arial, Helvetica, sans-serif;">obj</span><span style="font-family: Arial, Helvetica, sans-serif;">.style.left = 0);</span> //防止顶部溢出 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.offsetHeight <= 0 && (obj.style.top = doc[1] - obj.offsetHeight + "px") }

这里我附上的是网上的代码在实现防止溢出的同时,我还想赞一下这个写法,比我写的果断的要短了许多许多,以后也要试着写短点。

最新资讯
会员“买1得8”?蜻蜓FM遭集体投诉:骗人的

会员“买1得8”?蜻蜓FM

说好的买1个会员送8个其他App会员,买完以后发现并不是
松下回应“员工发‘918勿忘国耻’被警告”:将核查

松下回应“员工发‘91

松下电器(中国)有限公司微博回应称,针对近日松下员工发布
AMD:已获美国许可 向实体清单中某些公司供货

AMD:已获美国许可 向实

9月15日开始,美国的对华为禁令正式升级,台积电、高通、
中国探月工程副总设计师:嫦娥五号年底前发射

中国探月工程副总设计

预计今年底之前发射“嫦娥五号”,实现月球区域软着陆及
报告:全球科研城市北京排名第一 纽约第二

报告:全球科研城市北京

北京在全球科研城市中再次位列第一,第2至5位分别为纽约
量子通信重大进展:北京成功研制首台量子直接通信样机

量子通信重大进展:北京

实现了10公里光纤链路4kb/s通信速率的量子保密电话,推
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,