JS基础-键盘移动div-尚硅谷-P123

最新推荐文章于 2023-01-01 10:57:27 发布

比目鱼～

最新推荐文章于 2023-01-01 10:57:27 发布

阅读量277

点赞数

分类专栏： JS 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/qq_43624193/article/details/122741490

版权

JS 专栏收录该内容

23 篇文章 3 订阅

订阅专栏

视频链接：视频
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		#box1{
			height: 100px;
			width: 100px;
			background-color: #6495ED;
			position: absolute;
		}
		</style>
		
		<script type="text/javascript">
		/**
		 * 使div根据不同按键移动
		 * 按上向上移
		 * 按下向下移
		 * 左右移动修改left 上下移动修改top
		 * ........
		 */
			window.onload=function(){
				var box1=document.getElementById("box1");
				document.onkeydown=function(event){
					event=event||window.event;		
					var speed=10;
					//当用户按了Ctrl之后速度加快
					if(event.ctrlKey){
						speed=50;
					}
					/**
					 * 37左 * 38上* 39右 * 40下
					 */
					switch(event.keyCode){
						case 37:
							box1.style.left=box1.offsetLeft-speed+"px";
							break;
						case 39:
							box1.style.left=box1.offsetLeft+speed+"px";
							break;
						case 38:
							box1.style.top=box1.offsetTop-speed+"px";
							break;
						case 40:
							box1.style.top=box1.offsetTop+speed+"px";
							break;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box1"> </div>
	</body>
</html>