JS—实现元素上下左右移动

最新推荐文章于 2024-04-07 18:58:35 发布

spfLinux

最新推荐文章于 2024-04-07 18:58:35 发布

阅读量5.9k

点赞数 2

分类专栏： js 文章标签： js 上下移动

js 专栏收录该内容

137 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a {
			cursor: pointer;
		}
		#cell {
			width: 30px;
			height: 30px;
			background: red;
			position: relative;
			left: 0;
			top: 0;
		}
	</style>
</head>
<body οnlοad="move()">
	<p>友情提示：请按键盘上的上下左右键</p>
	<div id="cell"></div>
	<script>

		function move() {
			var a = document.getElementById("cell");
			a.style.left = 0;
			a.style.top = 0;
			document.onkeydown = function(e) {
				var e = window.event ? window.event : e;
				if(e.keyCode == 38) { //up
					a.style.top = parseInt(a.style.top) - 50 + 'px'; //注意要用parseInt 因为a.style.top类型是字符串
				}
				if(e.keyCode == 40) { //down
					a.style.top = parseInt(a.style.top) + 50 + 'px';
				}
				if(e.keyCode == 37) { //left
					a.style.left = parseInt(a.style.left) - 50 + 'px';
				}
				if(e.keyCode == 39) { //right
					a.style.left = parseInt(a.style.left) + 50 + 'px';
				}
			}
		}
	</script>
</body>
</html>