js实现键盘操作对div的移动或改变-------Day43
《爸爸去哪儿》的第二季据说要开播了额,有点小期待,不知道这一季的小宝贝们会有多萌,还会甜到心底吧,
哈哈,还记得那个风一样的女子呢,不知道她如今怎样了。
言归正传,继续今天的记录,实际上在刚開始的时候,我以为能够非常快的实现这个功能,毕竟昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,并且之前以前在写贪吃蛇时也用到过。结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,还有一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧。
这样我们先来分析,要实现键盘操作实现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")
}
这里我附上的是网上的代码在实现防止溢出的同一时候,我还想赞一下这个写法,比我写的果断的要短了很多很多,以后也要试着写短点。
好了,今天就到这里吧,明天还要去加班,不知道还会不会下雨。来个暖心的,他们俩事实上我都喜欢
js实现键盘操作对div的移动或改变-------Day43的更多相关文章
- JS通过键盘点击事件实现div移动
页面内容:文本框模拟键盘点击 div元素实现移动: <body> <textarea id="myarea"></textarea> < ...
- JS数字键盘
JS数字键盘,JS小键盘 CSS代码: #numberkeyboard { border: 1px solid #b3b3b3; background: #f2f3f7; height: 285px; ...
- JS软键盘代码
页面代码如下: <HTML> <HEAD> <TITLE>一个不错的js软键盘代码</TITLE> <meta http-equiv=" ...
- js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性
js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...
- JS虚拟键盘
由于是触摸屏,所以需要一款JS虚拟键盘.上网找了一个好用的VirtualKeyboard,作了修改. 修改该插件参考的博客文章:http://www.cnblogs.com/xinggong/arch ...
- Atitit.android js 的键盘按键检测Back键Home键和Menu键事件
Atitit.android js 的键盘按键检测Back键Home键和Menu键事件 1. onKeyDown @Override public boolean onKeyDown(int keyC ...
- js简单显示和隐藏div,触发超链接,动态更改button值,setInterval()简单使用,jquery easyui弹出框简单使用 .
js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...
- JS实现 键盘操作
JS实现 键盘操作: 详情可以去其逛网查看其API并下载,地址:http://craig.is/killing/mice <!DOCTYPE html PUBLIC "-//W3C// ...
- js浏览器键盘事件控制(转自新浪微博)
js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...
随机推荐
- python3 遍历文件
程序很简单,parent,dirnames,filenames分别表明当前目录下的文件夹数及文件数,然后通过os.wolk向深入遍历. import os import os.path # thi ...
- 自定义复选框 checkbox 样式
默认的复选框样式一般在项目中都很少用 ,看起来也丑丑的.这里提供一个优化样式后的复选框.原理就是隐藏掉默认样式,在用设计好的样式替代 html结构 <div> <input type ...
- access_token的获取方式
获取Access Token $appid = ""; $appsecret = ""; $url = "https://api.weixin.q ...
- ajax验证用户名和密码
var user = form.name.value; var password = form.password.value; var url = "chkname.php?user=&qu ...
- Python Tutorial 学习(一)--Whetting Your Appetite
Whetting Your Appetite [吊你的胃口]... 这里就直接原文奉上了... If you do much work on computers, eventually you fin ...
- EasyUI篇のico
所有图标位置: /themes/icons css引用位置: /themes/icon.css 可自行添加16*16的小图片放在icons中,icon.css代码添加即可 例如: .icon-logo ...
- linux常用命令(4)rm命令
rm是一个危险的命令,使用的时候要特别当心,尤其对于新手,否则整个系统就会毁在这个命令(比如在/(根目录)下执行rm * -rf).所以,我们在执行rm之前最好先确认一下在哪个目录,到底要删除什么东西 ...
- iOS的app 中的 埋点
埋点 就是 挖个坑把 种子埋到土里 然后浇水 等待发芽 埋点就是 ,鬼子要进村,我们埋下地雷 埋点就是 小说中 作者欲扬先抑 或者欲擒故纵 设下的伏笔... 好了,用文学的手法很好的 解释了一 ...
- 取消开机window 设备选择
问题:开机,出现window 设备选择,在win7 页面上会停留几秒.解决方案:win+R 输入 -msconfig 进入引导 把延迟改为3
- 物联网传输协议MQTT
MQTT是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提供可靠的网络服务.MQTT是专门针对物联网开发的轻量级传输协议.MQTT协议针对低 ...