下午写平移动画的时候,突然想怎么才能斜移,毕竟不能像alt,shift,ctrl这类一样,直接
if(event.keyCode==38 && event.ctrl)判断上键和ctrl有无同时按下
上网搜了一下,用数组,自己总结了一下,做了个移动div。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
}
</style>
<script>
var keys=[];//用来记录按下的按钮
var speed=10;
window.onload=function(){
var box1=document.getElementById("box1");
//设置定时器,解决一开始按下去有卡顿的问题,和越来越快的问题
//这样子按键只决定方向,就不会越来越快
setInterval(function(){
switch(keys.join()){
//左37上38右39下40
case "37":
box1.style.left=box1.offsetLeft-speed+"px";
break;
case "38":
box1.style.top=box1.offsetTop-speed+"px";
break;
case "39":
box1.style.left=box1.offsetLeft+speed+"px";
break;
case "40":
box1.style.top=box1.offsetTop+speed+"px";
break;
case "37,38":
box1.style.left=box1.offsetLeft-speed+"px";
box1.style.top=box1.offsetTop-speed+"px";
break;
case "37,40":
box1.style.left=box1.offsetLeft-speed+"px";
box1.style.top=box1.offsetTop+speed+"px";
break;
case "39,40":
box1.style.left=box1.offsetLeft+speed+"px";
box1.style.top=box1.offsetTop+speed+"px";
break;
case "38,39":
box1.style.left=box1.offsetLeft+speed+"px";
box1.style.top=box1.offsetTop-speed+"px";
break;
}
},30)
document.onkeydown = function(event){
//若keys里没有按下的按键的编码,则向其中添加
keys.indexOf(event.keyCode)<0 && keys.push(event.keyCode);
//将数组排序
keys.sort((a,b)=>a-b);
}
document.onkeyup = function(){
//删除松开按键的编码
keys.splice(keys.indexOf(event.keyCode),1);
}
};
</script>
</head>
<body>
<div id=box1></div>
</body>
</html>