键盘控制div移动

最新推荐文章于 2022-10-26 09:43:03 发布

刘蒋的博客

最新推荐文章于 2022-10-26 09:43:03 发布

阅读量133

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46140106/article/details/106232212

版权

键盘控制div移动

	<div id = "box"></div>
	<script>
	console.log(window.innerHeight)
	var box = document.querySelector('#box')
	var	maxTop = window.innerHeight - box.offsetHeight
	var maxLeft = window.innerWidth - box.offsetWidth
	document.onkeydown = function(e){
		e = e || window.event
		var code = e.keyCode || e.which
		console.log(code)
		switch (code){
			case 87:
			var top = box.offsetTop - 10
			if(top < 0) top = 0
			box.style.top = top +'px'
			break;
			case 32:
			var top = box.offsetTop + 10
			if(top < 0) top = 0
			box.style.top = top +'px'
	break;}}
	</script>
</body>

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200520114917613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjE0MDEwNg==,size_16,color_FFFFFF,t_70)移动盒子