您的位置：首页 > Web前端 > JavaScript

js实现键盘控制移动div

2017-05-08 16:31 621 查看

简单原理：

获取键盘keyCode，按一定规则改变指定div的边距实现控制指定div的移动。需注意的是要考虑div的溢出问题，要编写函数限制移动范围。

实现效果：

用户通过键盘的指定键指定div在web页面内移动。

代码块

html代码

<body>
<div id="d1">
<pre>您可以使用键盘进行如下操作：

上：↑ 下：↓ 左：← 右：→
</pre>
</div>
<div id="d2">我可以移动</div>
</body>


javascriptt代码

window.onload=function(){
var div=document.getElementById('d2');
var keyT=keyB=keyL=keyR=false;//设置指定键初始值
setInterval(function(){//设置定时器，键盘按下每隔10毫秒执行一次移动操作
if(keyL){
div.style.left=div.offsetLeft-10+"px";
}
else if(keyR){
div.style.left=div.offsetLeft+10+"px";
}
if(keyT){
div.style.top=div.offsetTop-10+"px";
}
else if(keyB){
div.style.top=div.offsetTop+10+"px";
};
limit()//limit()函数限制div移动防止溢出
},10);

document.onkeydown=function(event){//keydown事件，keyCode绑定移动键位
var event=event||window.event;
switch(event.keyCode){
case 37:
keyL=true;//if语句执行，div左移动
return;
case 38:
keyT=true;
return;
case 39:
keyR=true;
return;
case 40:
keyB=true;
return;
}
}
document.onkeyup=function(event){//keyup事件，用户松开按键时移动停止
var event=event||window.event;
switch(event.keyCode){
case 37:
keyL=false;
break;
case 38:
keyT=false;
break;
case 39:
keyR=false;
break;
case 40:
keyB=false;
break;
}
}
};


limit()函数

function limit(){
(div.offsetLeft<=0)&&(div.style.left=0);
//防止左溢出
(div.offsetTop<=0)&&(div.style.top=0);
//防止上溢出
(div.offsetLeft+div.offsetWidth>=document.documentElement.clientWidth)&&(div.style.left=document.documentElement.clientWidth-div.offsetWidth+"px");
//防止右溢出
(div.offsetTop+div.offsetHeight>=document.documentElement.clientHeight)&&(div.style.top=document.documentElement.clientHeight-div.offsetHeight+"px");
//防止下溢出
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript web
相关文章推荐
新的分享
章节导航