JS键盘移动div

最新推荐文章于 2022-10-26 09:43:03 发布
最新推荐文章于 2022-10-26 09:43:03 发布
阅读量99 收藏 1
点赞数 1
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxhsym/article/details/104685330
版权

div块跟随上下左右键移动


<style type="text/css">
#div{
width:150px;
height:150px;
background-color:yellowgreen;
position:absolute;
}
</style>

<script type="text/javascript">
window.onload=function(){
document.onkeydown=function(event){
event=event||window.event;
 var speed=10;
 
 switch(event.keyCode){
 case 37:
 div.style.left=div.offsetLeft-speed+"px";
 break;
 case 39:
 div.style.left=div.offsetLeft+speed+"px";
 break;
 case 38:
 div.style.top=div.offsetTop-speed+"px";
 break;
 case 40:
 div.style.top=div.offsetTop+speed+"px";
 break;
 }
}
}
</script>



<body>
   <div id="div"></div>
  </body>
❀XXH❀
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Javascript键盘移动div案例
qq_46582421的博客
12-14 937
<!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&gt
js实现上下左右键盘控制div移动
weixin_58830590的博客
08-20 445
div通过键盘事件上下左右实现div块的移动
JS-键盘移动事件
weixin_30908103的博客
01-04 76
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘移动div</title> <style> *{margin:0px;padding:0px;} ...
js实现键盘控制div的移动，且解决停顿问题
起小点
05-29 866
解决原生js通过键盘控制div移动，解决停顿问题 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 100px; ...
JS实现键盘控制div全方位移动
huangqiang80的博客
01-13 835
JS实现键盘控制div全方位移动 创建onkeydown的全局响应事件，给div设置加速度，并控制div开始移动。 创建定时器控制div持续移动，这样可以防止div移动的卡顿现象。 创建onkeyup的全局响应事件，控制div停止移动。 div移动的卡顿现象是由于在按下键盘时，系统需要区分用户是否是持续输入，这个过程就会出现短暂的卡顿，用定时器可以巧妙的避免。 完整代码： <style lang="css"> #box1{ width: 100px;
JS基础_定时器练习_使用键盘移动div
weixin_41804367的博客
09-21 198
要求 使用定时器实现以下效果：点击键盘上的上下左右键时，div朝着相应的方向移动。 分析 想要div朝着相应的方向移动，首先我们要知道电脑如何识别键盘上的按键是否被点击了，也就是根据各个按键的编码来识别按键是否被点击，然而，当我们点击按键时，div会移动，并且可能一直超某个方向移动下去，因为我们使用了定时器，那么就需要设置当键盘上的按键松开时，就删除定时器，使div停止移动，我们可以设置一个变量来接收按键的编码，当按键被点击是，该变量对于当前按键的编码值，当键盘上的按键松开时，该变量等于0且删除定时器
键盘移动div样例
不仅是记忆的博客
06-27 348
键盘移动div *{margin:0px;padding:0px;} #move{width:200px;height:200px;background:orange;font-family:microsoft yahei;position:absolute;top:200px;} var step = 10;
AJAX键盘控制div移动,js如何实现利用键盘控制div移动
weixin_29084111的博客
08-06 174
描述：div通过键盘事件上下左右实现div块的移动效果：(视频教程推荐：js视频教程)js代码：var Method=(function () {return {EVENT_ID:"event_id",loadImage:function (arr) {var img=new Image();img.arr=arr;img.list=[];img.num=0;// 如果DOM对象下的事件...
js_键盘事件-键盘控制div移动
weixin_47295886的博客
10-26 261
/使得div可以根据不同的方向键移动。第一下：有一个卡顿——只后需要修改。按下ctrl速度变快。
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
JavaScript利用键盘码控制div移动
10-15
主要为大家详细介绍了JavaScript利用键盘码控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
简历模板简洁风简洁干练简历模板简历模板简洁风(简洁干练简历模板).zip
06-17
在求职的征途上，一份出色的简历是你通往梦想职位的敲门砖。我们精心准备了一系列面试求职简历模板，旨在帮助你以最佳形象站在潜在雇主面前。这些简历模板不仅设计精美，而且注重内容的清晰呈现，使招聘经理一目了然地看到你的能力和经验。 我们的模板集合了多种风格与布局，无论你是应届毕业生、职场跳槽者还是行业专家，都能在这里找到适合你职业形象的简历设计。每一个模板都经过精心设计，确保你的简历在众多求职者中脱颖而出，同时保持足够的专业度和可读性。 不仅如此，我们的简历模板易于编辑，你可以根据具体职位需求快速调整内容，展现你的个人优势和职业成就。使用这些模板，将大大提高你的面试机会，并帮助你更好地表达自己的价值和潜力。 别让传统且缺乏创意的简历阻碍你迈向成功的道路。立即下载这些精美的简历模板，让你的求职之路更加顺畅，向心仪的工作迈进吧！记住，一个良好的开始是成功的一半，而一份精致的简历，正是你成功的起点。
Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）
06-17
Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目） Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型。 Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）Python毕业设计-基于深度学习的水果识别系统的源代码+文档说明+数据集+模型（高分项目）
navicat基础操作教程
06-17
Navicat 是一款广泛使用且功能强大的数据库管理工具，它能够连接和管理多种数据库系统，例如 MySQL、MariaDB、Oracle、PostgreSQL、SQLite 等[^1^][^3^][^4^][^5^][^7^][^9^][^10^]。自2001年以来，Navicat 已成为全球超过500万名数据库用户的优选[^1^]。它提供了多达7种语言供客户选择，并且被公认为全球最受欢迎的数据库前端用户界面工具[^1^]。 Navicat 的特点包括强大的数据库连接能力、直观的用户界面、多种功能模块以及数据同步和转换能力[^3^]。它还提供了数据库设计和建模功能，帮助用户规划和设计数据库结构[^3^]。Navicat 适用于多种平台，包括 Microsoft Windows、MacOS、Linux 和 iOS[^1^]，并且可以让用户连接到任何本机或远程服务器[^1^]。Navicat Premium 版本允许用户在不同数据库系统间传输数据，并支持批处理作业的计划和执行[^1^]。 Navicat 的功能包括但不限于数据迁移、操作工具、查询编辑、数据库设计器、数据可视化工具、数据
protobuf-3.12.4-cp37-cp37m-win_amd64.whl
最新发布
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
本科毕业设计：基于UNet的遥感图像语义分割python实现源码+论文（高分项目）.zip
06-17
本科毕业设计：基于UNet的遥感图像语义分割python实现源码+论文（高分项目）.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 本科毕业设计：基于UNet的遥感图像语义分割python实现源码+论文（高分项目）.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 本科毕业设计：基于UNet的遥感图像语义分割python实现源码+论文（高分项目）.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定过的能够满足学习、使用需求，如果有需要的话可以放心下载使用。 本科毕业设计：基于UNet的遥感图像语义分割python实现源码+论文（高分项目）.zip本资源中的源码都是经过本地编译过可运行的，评审分达到95分以上。资源项目的难度比较适中，内容都是经过助教老师审定
protobuf-3.15.1-cp37-cp37m-manylinux1_x86_64.whl
06-17
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
js键盘控制div移动
04-26
好的，我可以帮你解决这个问题。你可以尝试以下代码来实现js键盘控制div移动： HTML代码： ``` <div id="box"></div> ``` CSS代码： ``` #box { position: absolute; width: 100px; height: 100px; background-color: red; } ``` JavaScript代码： ``` var box = document.getElementById("box"); var left = 0; var top = 0; document.onkeydown = function(event) { switch (event.keyCode) { case 37: // 左箭头 left -= 10; box.style.left = left + "px"; break; case 38: // 上箭头 top -= 10; box.style.top = top + "px"; break; case 39: // 右箭头 left += 10; box.style.left = left + "px"; break; case 40: // 下箭头 top += 10; box.style.top = top + "px"; break; } }; ``` 这段代码使用键盘事件监听器来检测按下的方向键，并根据每个方向键的按键码来移动div元素的位置。你可以根据自己的需要来调整左、上、右和下的移动距离，以及div元素的位置、大小和背景颜色等属性。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值