JavaScript 方向键控制div

最新推荐文章于 2023-01-01 10:57:27 发布
最新推荐文章于 2023-01-01 10:57:27 发布
阅读量75 收藏
点赞数
分类专栏： JavaScript 笔记 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46067727/article/details/124592261
版权 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#box1{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
		}
	</style>
	<script type="text/javascript">
		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;
				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>

(作者观看的学习视频：B站尚硅谷）

Tmil
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生js实现键盘控制div移动且解决停顿问题
10-20
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
JS基础-键盘移动div-尚硅谷-P123
qq_43624193的博客
01-29 267
视频链接：视频 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ height: 100px; width: 100px; background-color: #6495ED; position: absolute; }
js基础——修改div移动练习
jwz934738949的博客
09-14 116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改div移动练习</title> <style> #box1 { width: 100px; ...
JS---基础_修改div移动练习(改进)
chen_zan_yu_的博客
08-16 134
哈哈哈，好玩，像俄罗斯方块~~~~ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; heigh...
学习笔记—使div/盒子/滑块/方块在鼠标按下并移动时跟随鼠标移动，鼠标松开释放时div不跟随鼠标移动（鼠标拖拽idv)
weixin_44312227的博客
05-19 606
<script type="text/javascript"> window.onload=function(){ var box1=document.getElementById("box1"); document.onmousedown=function(){ document.onmousemove=function(event){ event=event||window.event; var left=event.clientX; v
JavaScript利用键盘码控制div移动
11-21
-- JavaScript代码用于处理键盘事件并控制div移动 --> <script type="text/javascript"> var oBox = document.getElementById("box"); // 获取div元素 var x = 0; // 初始化div的x坐标 var y = 0; // 初始化div...
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
12-12
在本文中，我们将深入探讨如何使用jQuery实现一个功能，即通过键盘上的方向键来控制div元素在页面上上下左右移动。这个功能对于创建交互式的网页元素或者游戏界面非常有用。以下是我们将要讨论的关键知识点： 1. **...
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
10-17
【JavaScript实现盒子跟随鼠标移动与键盘方向键控制】 在网页开发中，我们有时需要创建一些交互性较强的效果，比如让一个元素（如一个红色的盒子）跟随鼠标移动，或者通过键盘的方向键来控制其移动。这涉及到...
js实现上下左右键盘控制div移动
10-15
标题中的“js实现上下左右键盘控制div移动”指的是在网页前端开发中，使用JavaScript语言来控制HTML中的div元素，使其能够根据用户按下键盘上的上、下、左、右箭头键来改变位置。这种功能常见于游戏或者某些交互式...
js实现坦克大战 javascript
01-31
例如，为方向键添加监听器，我们可能需要监听`keydown`事件，并通过`event.keyCode`来识别按下的是哪个键。例如，上箭头对应的keyCode是38，下箭头是40，左箭头是37，右箭头是39，空格键是32。 2. 游戏循环：在坦克...
JS键盘方向控制
iteye_14791的博客
12-19 248
&lt;script&gt; //document.onkeydown=keydown //document.onkeyup=keyup var $=function(objId) { return document.getElementById(objId); } Array.prototype.remove=function(keypos) { var...
尚硅谷的js操作dom元素，学习笔记
weixin_43973940的博客
05-08 173
听尚硅谷的js操纵dom元素做的笔记 第一个视频： 1、dom是什么？ 注释： D：document O:object M:model 2、dom树 注释：根节点包含其他的子节点。 3、 示例，对于button绑定script代码 4、对代码的注释和理解： 5、相同功能不同的写法： 注释：这样写不好的地方是，html和js的代码，耦合起来了。 这样的写法，更加适合，整个html页面中只有一个功能的时候。 6、script放的位置...
Js自定义移动方向
zs1206986774的博客
10-24 268
Js自定义移动方向 效果图
JS基础-div随鼠标移动-尚硅谷-P112
qq_43624193的博客
01-27 76
视频地址： 视频 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: #6495ED; position: absolute; } &l
threejs的控制器 立方体空间 基本控制器+惯性控制+飞行控制
preserveXing的博客
06-30 899
threejs的控制器 立方体空间 基本控制器+惯性控制+飞行控制
three.js 轨道控制器的常用属性和初始化（OrbitControls）
weixin_50207776的博客
08-30 3639
1.认识轨道控制器 控制器是three的外置包，通过引入，可以对模型进行鼠标的某些操作，例：拖放。旋转，放大。缩小。还有一些其他属性：比如模型的自转。 2.初始化控制器（常用属性详解） 首先引入外部包 <scriptsrc="../js/OrbitControls.js"></script> 初始化 var controls = new THREE.OrbitControls(camera, renderer.domElement);//建立控..
JS实战之使用键盘方向键控制方块的上下左右移动
weixin_44278828的博客
10-13 2409
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>控制方块的上下左右移动</title> <style type="text/css"> #box1{ width: 100px; height: 100px;
JS 简单的操作杆旋转实现
最新发布
不定时分享最优质的网络技术与教程，满满的干货。
01-01 795
主要是通过鼠标滑动事件控制“控制球”位置更改及获取以屏幕上方向为0度的角度计算，来控制“方向盘”进行旋转。首先说明一下，请直接忽略背景图，这里主要实现的是杆旋转控制方向盘旋转。转换为旋转角度供外界使用，代码拙劣，大神勿笑[抱拳][抱拳][抱拳]代码很简单，其中通过计算来控制小球的位置移动，并将时时的鼠标滑过的。4、暴露控制球与控制区域中心形成的旋转角度，触发外界事件（是否进入到控制球，如果进入，控制小球随着鼠标进行移动。2、鼠标划出控制区域，控制球复位，旋转角度归零。鼠标移出控制区域，控制球复位。
JS基础_键盘移动div
兴趣是最好的老师
12-12 214
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } .
JS实现键盘控制div全方位移动
huangqiang80的博客
01-13 866
JS实现键盘控制div全方位移动 创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。 创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。 创建onkeyup的全局响应事件，控制div停止移动。 div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。 完整代码： <style lang="css"> #box1{ width: 100px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值