t06 dom 小练习 div随方向键移动

最新推荐文章于 2023-03-16 15:15:03 发布

weixin_43708170

最新推荐文章于 2023-03-16 15:15:03 发布

阅读量69

点赞数

分类专栏： dom练习文章标签： js

本文链接：https://blog.csdn.net/weixin_43708170/article/details/107420150

版权

dom练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

t06 dom 小练习 div随方向键移动

功能

实现按动方向键，页面中的div块会上下左右移动
按下ctrl键之后加速

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				document.onkeydown = function(event){
					event = event || window.event;
					var sp = 10;
					//按下ctrl键加速
					if(event.ctrlKey){
						sp = 100;
					}
					//左37，上38，右39，下40
					if(event.keyCode == 37){					
						box1.style.left = box1.offsetLeft - sp+"px";
					}else if(event.keyCode == 38){
						box1.style.top = box1.offsetTop - sp+"px";
					}else if(event.keyCode == 39){
						box1.style.left = box1.offsetLeft + sp+"px";
					}else if(event.keyCode == 40){
						box1.style.top = box1.offsetTop + sp+"px";
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

weixin_43708170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
t06 dom 小练习 div随方向键移动

t06 dom 小练习 div随方向键移动功能实现按动方向键，页面中的div块会上下左右移动按下ctrl键之后加速代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px;
复制链接

扫一扫

专栏目录