let div1=document.getElementsByTagName("div")[0]; //选取要操作的元素
let oTop=false,oLeft=false,oRight=false,oButton=false; //添加四个开关来操作上下左右的实现
window.οnkeydοwn=function () { //当键盘上的方向键被按下时,将开关打开
let even=window.event;
switch (even.keyCode){
case 38:
oTop=true;
break;
case 37:
oLeft=true;
break;
case 39:
oRight=true;
break;
case 40:
oButton=true;
break;
}
};
window.οnkeyup=function(){ //当键盘上的方向键弹起时,将开关关闭
let even=window.event;
switch (even.keyCode){
case 38:
oTop=false;
break;
case 37:
oLeft=false;
break;
case 39:
oRight=false;
break;
case 40:
oButton=false;
break;
}
};
setInterval(function () { //设置定时器,同时检查开关的开闭,如果开执行代码移动
if (oTop){
div1.style.marginTop=div1.offsetTop-10+"px";
} else if (oLeft){
div1.style.marginLeft=div1.offsetLeft-10+"px";
} else if (oRight){
div1.style.marginLeft= div1.offsetLeft + 10 +"px"
} else if (oButton){
div1.style.marginTop=div1.offsetTop+10+"px";
}
},50)
实现键盘点击操作页面元素滑动
最新推荐文章于 2021-05-17 22:38:30 发布