这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧:
- 要实现div的移动,首先最关键的一点:获取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"