js 利用上下左右键盘控制物体移动

最新推荐文章于 2023-11-18 23:34:40 发布

小刘吃饱饱

最新推荐文章于 2023-11-18 23:34:40 发布

阅读量2.3k

点赞数 1

分类专栏： js

本文链接：https://blog.csdn.net/F_ayyyy/article/details/109401143

版权

JavaScript 键盘事件元素定位 offsetLeft offsetTop

关键词由CSDN通过智能技术生成

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

须知：
上下左右的keyCode
← :37
↑：38
→：39
↓：40
**注意！！！要将元素设为绝对定位 position：absolute 否则移动不了 **

js代码：

//获取移动元素
var moveblock=document.getElementById("moveblock")
//键盘按下事件
document.onkeydown=function(e){//传入事件对象e 
	var evt=e||event;//解决浏览器兼容
	switch(evt.keyCode){
		case 37://向左
		moveblock.style.left=moveblock.offsetLeft-5+"px";
		//用offsetLeft来获取位置 不用走style那一套函数，但获取到的是纯数字 所以还要加上单位"px" 这里是按键一次移动5px
		break;
		case 38://向上
		moveblock.style.top=moveblock.offsetTop-5+"px";
		break;
		case 39://向右
		moveblock.style.left=moveblock.offsetLeft+5+"px";
		break;
		case 40://向下
		moveblock.style.top=moveblock.offsetTop+5+"px";
		
	}