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


Posted in Javascript onJune 23, 2014

昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过。结果一?意粒?质呛镁玫囊欢问奔洌??愿芯跤斜匾?锹枷碌模?环矫嫒酚锌扇≈?Γ?硪环矫嬉捕宰约旱奶嵝眩?崭帐迪止?墓δ茏?酚质悄吧?肆耍?艿睦此担?闶俏鹿识??掳伞?/p>

这样我们先来分析,要实现键盘操作实现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") 
}

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

Javascript 相关文章推荐
JQuery中each()的使用方法说明
Aug 19 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jQuery的$.proxy()应用示例介绍
Apr 03 Javascript
显示今天的日期js代码(阳历和农历)
Sep 30 Javascript
JavaScript简单表格编辑功能实现方法
Apr 16 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
JS实现字符串中去除指定子字符串方法分析
May 17 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 #Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 #Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
yepnope.js使用详解及示例分享
Jun 23 #Javascript
js的延迟执行问题分析
Jun 23 #Javascript
You might like
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP 批量删除数据的方法分析
2009/10/30 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
CodeIgniter使用smtp服务发送html邮件的方法
2015/06/10 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
javascript 兼容各个浏览器的事件
2015/02/04 Javascript
javascript实现判断鼠标的状态
2015/07/10 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
全面了解javascript三元运算符
2016/06/27 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
JS实现的验证身份证及获取地区功能示例
2017/01/16 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
JS闭包的几种常见形式实例详解
2017/09/16 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
2018/08/02 Javascript
jquery实现选项卡切换代码实例
2019/05/14 jQuery
微信小程序图片自适应实现解析
2020/01/21 Javascript
[01:59]DOTA2首部纪录片《Free to play》预告片
2014/03/12 DOTA
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
python 批量解压压缩文件的实例代码
2019/06/27 Python
Python turtle画图库&amp;&amp;画姓名实例
2020/01/19 Python
Python内置函数locals和globals对比
2020/04/28 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
如何用Python绘制3D柱形图
2020/09/16 Python
公司财务总监岗位职责
2013/12/14 职场文书
总会计师岗位职责
2014/02/19 职场文书
农村改厕实施方案
2014/03/22 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
2019单位介绍信怎么写
2019/06/24 职场文书
Python opencv缺陷检测的实现及问题解决
2021/04/24 Python
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android