<style>
*{
margin: 0px;
padding: 0px;
}
.box{
width: 100px;
height: 100px;
background-color: gold;
position: absolute;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//box的移动,
//获取移动相关键的ascll值,用switch判断来匹配,当相等时,改变它距离父元素的距离
var box=document.querySelector(".box")
//上38 下40 左37 右39 上下左右的ascll码
onkeydown=function(){ //当用户按下键盘上任意键触发,如果按住不放,会重复触发
var speed=10
if(event.shiftKey){ //组合键,注意写法 shiftKey
speed=100
}
switch(event.keyCode){ //keyCode,是获取Ascll码,但是要配合event使用
case 38:
box.style.top=box.offsetTop-speed+"px";//offsetTOP offsetLeft,距离父元素上,左的距离,配合定位使用
break;
//box.style.top=box.offsetTop, box距离上边的高度为,box距离父元素的top
case 40:
box.style.top=box.offsetTop+speed+"px";
break;
case 37:
box.style.left=box.offsetLeft-speed+"px";
break;
case 39:
box.style.left=box.offsetLeft+speed+"px";
break;
}
}
</script>
</body>
js键盘事件,移动
最新推荐文章于 2022-10-26 09:43:03 发布