js键盘事件--实现div移动

最新推荐文章于 2023-02-13 22:38:04 发布

LRight-T

最新推荐文章于 2023-02-13 22:38:04 发布

阅读量855

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_44604924/article/details/108163946

版权

用键盘事件实现div移动

键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作
onkeyup 按键松开
这两个事件一般会绑定给可以获取焦点的一些元素或者document元素
可通过keyCode来获取按键的编码
除此之外还有altkey,shiftkey,ctrlkey
keyCode 37左 38上 39 右 40下
js代码如下：

<script type="text/javascript">
			/*
				 键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作
				 onkeyup 按键松开
				 这两个事件一般会绑定给可以获取焦点的一些元素或者document元素
				 可通过keyCode来获取按键的编码
				 除此之外还有altkey,shiftkey,ctrlkey
				 keyCode 37左 38上 39 右 40下
				 * */
			window.onload = function(){
				var box16 = document.getElementById('box16');
				var speed = 10;
				document.onkeydown = function(event){
					event = event || window.event;
					if(event.keyCode == 37){//向左
						box16.style.left = box16.offsetLeft-speed+"px";
					}else if(event.keyCode == 40){//向下
						box16.style.top = box16.offsetTop+speed+"px";
					}else if(event.keyCode == 39){//向右
						box16.style.left = box16.offsetLeft+speed+"px";
					}else{//向上
						box16.style.top = box16.offsetTop-speed+"px";
					}
					};	
			};
		</script>

html代码如下：

<body>
		<div id="box16"></div>
	</body>

样式代码如下：

<style type="text/css">
			#box16{
				width: 100px;
				height: 100px;
				background-color: red;
				position: relative;
			}
			
		</style>

LRight-T

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js键盘事件--实现div移动

用键盘事件实现div移动键盘事件：onkeydown 按键按下，连续按下时，第一次和第二次会停顿一下，防止误操作onkeyup 按键松开这两个事件一般会绑定给可以获取焦点的一些元素或者document元素可通过keyCode来获取按键的编码除此之外还有altkey,shiftkey,ctrlkeykeyCode 37左 38上 39 右 40下js代码如下：<script type="text/javascript"> /* 键盘事件：onkeydown 按键按下
复制链接

扫一扫