jsはキーボード制御移動divを実現します.
6875 ワード
簡単な原理:
キーボードkeyCodeを取得し、指定されたdivの余白を一定の規則で変更し、指定されたdivの移動を制御することができます.divのオーバーフロー問題を考慮して、関数を作成して移動範囲を制限します.
実現効果:
ユーザーはキーボードの指定キーでdivを指定してwebページ内を移動します.
コードブロック
htmlコード
キーボードkeyCodeを取得し、指定されたdivの余白を一定の規則で変更し、指定されたdivの移動を制御することができます.divのオーバーフロー問題を考慮して、関数を作成して移動範囲を制限します.
実現効果:
ユーザーはキーボードの指定キーでdivを指定してwebページ内を移動します.
コードブロック
htmlコード
<body>
<div id="d1">
<pre> ：
：↑ ：↓ ：← ：→
pre>
div>
<div id="d2"> div>
body>window.οnlοad=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.οnkeydοwn=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.οnkeyup=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;
}
}
};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");
//
}