【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置带注释/总结

_小鹰

已于 2022-02-15 22:51:17 修改

阅读量392

点赞数 1

分类专栏：前端文章标签：前端 css javascript html

于 2022-02-15 22:42:39 首次发布

本文链接：https://blog.csdn.net/cc2855816075/article/details/122953622

版权

前端专栏收录该内容

38 篇文章 1 订阅

订阅专栏

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业6-键盘事件</title>
		<script src="utility.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
				border: 0px solid #000000;
			}
			#bd{
				background: url(img-4.jpg);
				background-repeat: no-repeat;
				border: 0px solid;
			}
			#b-box{
				width: 900px;
				height: 724px;
				position: relative;
			}
			
			#img0{
				width: 40px;
				position: absolute;
				bottom: 10px;
				left: 85px;
			}
		</style>
	</head>
	
	<!-- ★★★键盘的事件设在body上★★★ -->
	<body id="bd" onkeydown="move(event)">
		
		<script type="text/javascript">
		//keyCode   w: 87 s: 83 a: 65 d: 68
			function move(e){
				// l($("img0").offsetLeft);
				if(e.key == 'w' || e.key == 'W')
					//★★★offsetLeft元素偏移量，注意写法！+"px"，把它设成字符串，格式同CSS★★★
					$("img0").style.top = $("img0").offsetTop - 10 + "px";
				if(e.key == 'a' || e.key == 'A')
					$("img0").style.left = $("img0").offsetLeft - 10 + "px";
				if(e.key == 's' || e.key == 'S')
					$("img0").style.top = $("img0").offsetTop + 10 + "px";
				if(e.key == 'd' || e.key == 'D')
					$("img0").style.left = $("img0").offsetLeft + 10 + "px";
			}
		</script>
		
		<div id="b-box">
			<img src="img-3.jpg" alt="hero.jpg" id="img0"/>
		</div>
		
	</body>
</html>

其中用到的utility.js：

function $(id){
	return document.getElementById(id);
}
function l(a){
	console.log(a);
}

DOM练习文件：

https://download.csdn.net/download/cc2855816075/80848641

注意：

1、键盘的事件设在body上。
2、offsetLeft元素偏移量，注意写法！+“px”，把它设成字符串，格式同CSS。
$(“img0”).style.top = $(“img0”).offsetTop - 10 + “px”;

_小鹰

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置带注释/总结

效果：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业6-键盘事件</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{
复制链接

扫一扫