实现键盘操作实现 div 的移动,最关键的一点:获取 div 对象,下面有个不错的示例,大家可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过。结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧。
这样我们先来分析,要实现键盘操作实现 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")
- }
这里我附上的是网上的代码在实现防止溢出的同时,我还想赞一下这个写法,比我写的果断的要短了许多许多,以后也要试着写短点。
来源: