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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
Sep 03 Javascript
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 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中iconv函数使用方法
2008/05/24 PHP
据说是雅虎的一份PHP面试题附答案
2009/01/07 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
使用PHP免费发送定时短信的实例
2016/10/24 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
jquery 操作日期、星期、元素的追加的实现代码
2012/02/07 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
详解使用VUE搭建后台管理系统(vue-cli更新至3.0)
2018/08/22 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
原生JS与JQ获取元素的区别详解
2020/02/13 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
原生JS实现多条件筛选
2020/08/19 Javascript
[03:48]大碗DOTA
2019/07/25 DOTA
Python中的异常处理学习笔记
2015/01/28 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Django实现全文检索的方法(支持中文)
2018/05/14 Python
Python netmiko模块的使用
2020/02/14 Python
Python Selenium XPath根据文本内容查找元素的方法
2020/12/07 Python
关于django python manage.py startapp 应用名出错异常原因解析
2020/12/15 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
Expedia法国:全球最大在线旅游公司
2018/09/30 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
关爱残疾人标语
2014/06/25 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
2015试用期转正工作总结
2014/12/12 职场文书