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 相关文章推荐
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
用JavaScript实现动画效果的方法
Jul 20 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
Aug 05 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
Vue中对比scoped css和css module的区别
May 17 Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
Dec 01 Vue.js
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 gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
php提示Call-time pass-by-reference has been deprecated in的解决方法[已测]
2012/05/06 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
PHP Yii框架之表单验证规则大全
2015/11/16 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
基于php实现的验证码小程序
2016/12/13 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
使表格的标题列可左右拉伸jquery插件封装
2014/11/24 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Bootstrap Table使用整理(三)
2017/06/09 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
举例讲解Python中的迭代器、生成器与列表解析用法
2016/03/20 Python
python基础教程之匿名函数lambda
2017/01/17 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
OpenCV+python手势识别框架和实例讲解
2018/08/03 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python离线安装PIL 模块的方法
2019/01/08 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
俄罗斯有趣和原创礼物网上商店:MagicMag
2019/08/01 全球购物
生产车间主任的个人自我鉴定
2013/10/25 职场文书
岗位职责风险点
2014/03/12 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
党员个人党性分析材料
2014/12/18 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
2016中考冲刺决心书
2015/09/22 职场文书
一起来学习Python的元组和列表
2022/03/13 Python