时间:2021-05-26
昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过。结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧。
这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧:
*---要实现div的移动,首先最关键的一点:获取div对象
*---postion:absolute将div完全从文档流中拖出啊,这个地方漏掉了,回去看了贪吃蛇才发现的,真晕
*---获取键盘的操作
*---根据键盘的不同操作,给出不同响应
这就是我想起的大概需要注意的地方,还是先来看代码:
先是html部分
然后记录下javascript的实际操作
就这样,我们完成了原理分析中的需求,同时也就可以通过上、下、左、右按键来实现div的上下左右移动了,接下来,再来记录下敏感地方吧。
1、div需是absolute的,为这个纠结了半天实在不值得,于是查询了下,了解了一个概念“文档流”,
文档流,通常说是元素从上而下,自左向右进行排列,那么这个元素就是节点元素,庞大的dom啊。还是先来说说其它解释吧,我比较喜欢的是这样来阐述:文档+流,文档顾名思义就是说网页文档,而流则是输出方式,还有的解释说是浏览器的解析方式,这个貌似更形象一点,正常的文档流,就好像是一个平面,而一个元素你把它放在哪了,它就在哪,而浮动、固定定位和相对定位,这里分析absolute,就是重新生成了一个流,脱离了它的父层标签,就好像之前z-index为0,而这个的z-index就上了它的上面,凭空悬浮在它上面的,可以通过left、top来肆意的挪动它。
大概意思能够明白了,但是感觉有些地方还是没法有效的用语言来表述,而且有些点略微有些模糊,相信随着经验的累积,我能理解的更深一些。
2、keyCode这里的大写,onkeyup和onkeydown这里的小写,在这个地方也是测试了下才发现的问题,对于javascript,每个小地方都是大问题啊;
3、switch里的break;这个java里面就常碰到,就不多说了
大概的问题就是以上几点,而你还记得注释的快捷键么,还记得其他快捷键么,这就出现了一个问题,上面做出响应的我们只是针对单个按键,如果我们想用一些快捷键呢,该怎么设置呢?
先来看下代码:
这里碰到了event对象的另一个属性,是在keyCode之外的另一个,ctrlKey,还是大写哦,它的主要功能是检查ctrl按键的状态,其实这样的还有两个:
altKey和shiftKey,分别是对alt按键和shift按键状态的检查,这样知道怎么设个快捷键了吧。
其实如果是我自己写的话,可能这样我就已经很满足了,但是在翻阅搜索的时候,总能碰到心思缜密的朋友
附上代码,你知道是要做什么么:
这里我附上的是网上的代码在实现防止溢出的同时,我还想赞一下这个写法,比我写的果断的要短了许多许多,以后也要试着写短点。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下描述:div通过键盘事件上下左右实现div块的移动效果:实现:js:var
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下:复制代码代码如下:函数传参,改变Div任意属性的值body,p{margin:
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下:复制代码代码如下:函数传参,改变Div任意属性的值body,p{margin:
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下:?12345678910111213141516171819202122232
先给大家展示下效果图,大家感觉不错,请参考实现代码:实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class。由于微信小程序中不能操作page