千古难题之---如何使用JS上下左右键让一个元素跟随移动

本文链接：https://blog.csdn.net/qq_42225915/article/details/102594748

本文介绍如何利用JavaScript响应键盘上下左右键，使页面元素随之移动。通过获取指定元素并监听键盘事件，实现简单的交互效果。代码示例中，元素可以根据需求更换，不仅限于DIV，也可适用于图片等其他元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先请上眼!!!

好玩吧？

接下來不墨跡，上源码!!!

	<body>
		<div id="for_move" style="left:0px; top:0px; position:absolute;width: 80px;height: 80px;background-color: aqua;text-align: center;line-height: 80px;">Bookish</div>
		    <script>
			var forMove = document.getElementById("for_move");
			forMove.left = 0;
			forMove.top = 0;
			document.onkeydown = move;
			//键盘上下左右 方向键的键码（keyCode）是38、40、37和39
			function move(e) {
				var key = e.keyCode || e.which;
				switch (k) {
					case 37:
						forMove.left = forMove.left - 80;
						break;
					case 38:
						forMove.top = forMove.top - 80;
						break;
					case 39:
						forMove.left = forMove.left + 80;
						break;
					case 40:
						forMove.top = forMove.top + 80;
						break;
				}
				return forMove.style.left = forMove.left + 'px', forMove.style.top = forMove.top + 'px';
			}
		</script>
	</body>

讲解分析:

<div id="for_move" style="left:0px; top:0px; position:absolute;width: 80px;height: 80px;background-color: aqua;text-align: center;line-height: 80px;">Bookish</div>

这里可以换成别的标签不单单可以是DIV也可以是图片什么的!!!属性自己设置,怎么好看怎么来!
我也写过html的东西,所以不用我多说了!!基础不好记得补一下!

重点js的代码!!!
1.找到所要移动的元素
var forMove = document.getElementById(“for_move”);

		2.起始处定义一个移动后的位置
		forMove.left = 0;
		forMove.top = 0;
		document.onkeydown = move;
		
		3.开始控制键盘来移动元素了,  注意下面case的数字这些可不是我编的!!!!键盘上下左右方向键的键码（keyCode）是38、40、37和39
		function move(bookish) {
			var key = bookish.keyCode;
			switch (key) {
				case 37:
					forMove.left = forMove.left - 80;
					break;
				case 38:
					forMove.top = forMove.top - 80;
					break;
				case 39:
					forMove.left = forMove.left + 80;
					break;
				case 40:
					forMove.top = forMove.top + 80;
					break;
					这上面一大部分就是switch...case的方法开始判断点击了哪个键,然后进行80像素的移动,上方的80可以自定义填写!
			}
			return forMove.style.left = forMove.left + 'px', forMove.style.top = forMove.top + 'px';
		}
	</script>

This is Bookish:
Thank You!!!