用键盘控制图片移动

最新推荐文章于 2022-04-17 16:43:49 发布

qq_2417580538

最新推荐文章于 2022-04-17 16:43:49 发布

阅读量635

点赞数

本文链接：https://blog.csdn.net/qq_2417580538/article/details/102741066

版权

图片(图片可更改，背景可更改)
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>

		<center>
			<table>
				<tr>
					<td colspan="2" align="center"><b>操作面板</b></td>
				</tr>
				<tr>
					<td>上:</td>
					<td><input type="text" id="up" onkeyup="myFunction('up')" maxlength="1"></td>
				</tr>
				<tr>
					<td>下:</td>
					<td><input type="text" id="down" onkeyup="myFunction('down')" maxlength="1"></td>
				</tr>
				<tr>
					<td>左:</td>
					<td><input type="text" id="left" onkeyup="myFunction('left')" maxlength="1"></td>
				</tr>
				<tr>
					<td>右:</td>
					<td><input type="text" id="right" onkeyup="myFunction('right')" maxlength="1"></td>
				</tr>
				<tr>
					<td colspan="2" align="center"><button onclick="xuigai()">确定修改</button></td>
				</tr>
			</table>
			<label id="show"></label>

			<img id="img" src="chibang.jpg" style="width: 100px;height: 100px;position: absolute;left: 0px;top: 0px">

			<script type="text/javascript">
				var obj = document.getElementById('img');
				obj.left = 0;
				obj.top = 0;
				var up, down, left, right;
				var up1, down1, left1, right1;

				function xuigai() {
					up = up1;
					down = down1;
					left = left1;
					right = right1;
					alert(up + ";" + down + ";" + left + ";" + right);
					move();
				}

				function myFunction(str) {
					if (str == "up") {
						up1 = event.keyCode;
					}
					if (str == "down") {
						down1 = event.keyCode;
					}

					if (str == "left") {
						left1 = event.keyCode;
					}

					if (str == "right") {
						right1 = event.keyCode;
					}
				}

				function move() {
					console.log(event.keyCode);

					if (event.keyCode == parseInt(up)) {
						//上
						obj.top -= 100;
					}

					if (event.keyCode == parseInt(down)) {
						//下
						obj.top += 100;
					}

					if (event.keyCode == parseInt(left)) {
						//左
						obj.left -= 100;
					}

					if (event.keyCode == parseInt(right)) {
						//右
						obj.left += 100;
					}
					obj.style.left = obj.left + "px", obj.style.top = obj.top + "px";
				}
				document.onkeydown = move;
			</script>
	</body>
</html>

在这里插入图片描述
翅膀可移动

qq_2417580538

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用键盘控制图片移动

图片(图片可更改，背景可更改)代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> &l...
复制链接

扫一扫