键盘控制div移动

最新推荐文章于 2021-11-17 23:13:29 发布
最新推荐文章于 2021-11-17 23:13:29 发布
阅读量81 收藏
点赞数
文章标签： javascript ViewUI

键盘控制div移动
创建一个Move类（其实javascript没有类）
function Move(){this.init.apply(this,arguments);}
主要步骤如下：
一、初始化
创建一个div元素
为div设置style属性值
指定默认宽度，高度，距顶，距左，父容器，设置步长
二、键盘上下左右键控制移动
主要是修改div距顶，距左的距离
三、父容器限制
将创建的元素添加到父元素中，并使创建的元素在父元素内移动。
<!DOCTYPE html> <html> <head> <title>键盘控制div移动---www.cnblogs.com/kuikui</title> </head> <body> <script type="text/javascript"> function Move() { this.init.apply(this, arguments); } Move.prototype = { init: function (options) { this.obj = document.createElement("div"); this.obj.style.position = "absolute"; this.obj.style.zIndex = "9999"; this.obj.style.border = "1px solid red"; this.setOptions(options); this.obj.style.width = this.options.oWidth + "px"; this.obj.style.height = this.options.oHeight + "px"; this.obj.style.left = this.options.oLeft + "px"; this.obj.style.top = this.options.oTop + "px"; this.bigCont = this.options.bigCont; this.step = this.options.step; this.bigCont.appendChild(this.obj); var _this = this; document.onkeydown = function (event) { _this.moving(event); } }, setOptions: function (options) { this.options = { bigCont: document.body, oWidth: 50, oHeight: 50, oLeft: 100, oTop: 100, step: 10 }; for (var p in options) { this.options[p] = options[p]; } }, moving: function (event) { event = event || window.event; switch (event.keyCode) { case 37: this.obj.style.left = this.obj.offsetLeft - this.step + "px"; break; case 38: this.obj.style.top = this.obj.offsetTop - this.step + "px"; break; case 39: this.obj.style.left = this.obj.offsetLeft + this.step + "px"; break; case 40: this.obj.style.top = this.obj.offsetTop + this.step + "px"; break; } this.limit(); return false; }, limit: function () { var doc = [document.documentElement.clientWidth, document.documentElement.clientHeight]; this.obj.offsetLeft <= 0 && (this.obj.style.left = 0); this.obj.offsetTop <= 0 && (this.obj.style.top = 0); doc[0] - this.obj.offsetLeft - this.obj.offsetWidth <= 0 && (this.obj.style.left = doc[0] - this.obj.offsetWidth + "px"); doc[1] - this.obj.offsetTop - this.obj.offsetHeight <= 0 && (this.obj.style.top = doc[1] - this.obj.offsetHeight + "px"); } } var t = new Move(); </script> </body> </html>

运行代码

weixin_33809981
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS中用键盘的方向键来移动div（switch...case）
Fantasc的博客
08-14 881
使div随着键盘上下左右键的触发而移动， 思路：获取div，为document绑定键盘按下事件，在事件中使用switch…case来判断键盘按下的是哪一个键，对应的keyCode对应着不同的方向键： 左键被按下：在div现有的坐标值中，left的值减掉对应的值即可，值越大，移动的速度越快。 box.style.left = box.offsetLeft - speed +"px"; 上键被按下：在div现有的坐标值中，top的值减掉对应的值即可，值越大，移动的速度越快。 box.style.top
javascript利用键盘控制小方块的移动
11-20
本文实例为大家分享了利用键盘控制小方块的移动，供大家参考，具体内容如下 原理 1. 利用键盘控制移动，则需要了解onkeydown函数，表示某个按键被按下，可以以此绑定一个事件响应函数，当键盘被按下时候，触发此事件，进行移动 2. keyCode 对于keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 因此我们可以根据keycode返回的字符码来判断用户所按下的键，下面就是一个用于测试上下左右按键的js代码，经过我的测试之后，返回37 38 39 40；
javascript学习之利用方向键控制div模块的移动
Ibelievesunshine的博客
06-15 1086
通过了测试
js实现上下左右键盘控制div移动
10-15
主要为大家详细介绍了js实现上下左右键盘控制div移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现键盘控制DIV移动的方法
10-24
主要介绍了js实现键盘控制DIV移动的方法,以实例形式完整的讲述了js控制div移动所涉及的css、js与html使用技巧,需要的朋友可以参考下
原生js实现键盘控制div移动且解决停顿问题
10-20
主要给大家介绍了如何利用原生js实现键盘控制div移动，并且解决在移动过程中的停顿问题，文中给出了详细的示例代码，相信对大家的理解和学习很有帮助，下面跟着小编一起来看看吧。
键盘方向键移动元素
wuxiao18的博客
07-28 304
box1根据键盘上下左右按键移动，要记得给box1开启定位 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title></title> <style type="text/css"> #box1{ height:...
js自动移动图片，键盘可控制方向
10-22
js自动移动图片，键盘可控制方向
div键盘控制移动
漫天雪_昆仑巅
04-08 441
根据键盘的方向键上-下-左-右控制div移动， 代码如下： //键盘控制移动 $(document).keydown(function(event){ var keyNum = event.which; //获取键值 if(moveDiv!=null){ var keyNum = event.which; //获取键值 var Item = moveDi...
原生前端代码的小demo：键盘控制div的上下移动以及颜色变化
qq_40137978的博客
07-02 6348
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut
java键盘控制左右移动代码_js实现键盘控制DIV移动的方法
weixin_39937635的博客
03-02 150
window.onload = function (){var oBox = document.getElementById("box");var bLeft = bTop = bRight = bBottom = bCtrlKey = false;setInterval(function (){if (bLeft){oBox.style.left = oBox.offsetLeft - 10 +...
方向键控制移动移动.cpp
Lyntion的Blog
10-14 2164
Code: #include    #include    #include    #include    #include       void gotoxy(int x,int y)    {        COORD c;        c.X=x;        c.Y=y;        SetConsoleCursorPosition(GetStdHandle(S
JavaScript——用键盘wasd控制div移动
Chenbaby_的博客
11-27 3234
w：上    a：左   s：下  d：右 var div=document.getElementById('div'); document.onkeydown=function(e){ switch(e.keyCode){ case 65: div.style.left=parseInt(div.style.left)-10+"px"; break;
HTML+CSS+JavaScript实现键盘对div元素的移动（超详细）
qq_50485559的博客
11-17 1855
目录一、目标二、步骤三、代码1、HTML2、CSS3、JS 一、目标 1、小方块能够通过WASD控制移动 2、设置一个边框，让小方块只能在其中移动 3、当小方块超过边界时，从相反方向移动出来 二、步骤 1、创建HTML元素 2、用CSS设置边框和小方块样式 3、键盘响应 4、方块移动 5、超过边框后移动效果 三、代码 1、HTML ​ 需要设置一个盒子类，为小方块活动范围 ​ 在盒子里设置一个div元素，为小方块 <div class="box"><!--边框--> &l
js实现键盘控制div的移动，且解决停顿问题
起小点
05-29 870
解决原生js通过键盘控制div移动，解决停顿问题 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 100px; ...
html 上下左右键,js实现上下左右键盘控制div移动
weixin_39747568的博客
05-30 821
本文实例为大家分享了js上下左右键盘控制div移动的具体代码，供大家参考，具体内容如下描述：div通过键盘事件上下左右实现div块的移动效果：实现：js：var Method=(function () {return {EVENT_ID:"event_id",loadImage:function (arr) {var img=new Image();img.arr=arr;img.list=[];...
js键盘控制div移动
最新发布
04-26
你可以尝试以下代码来实现js键盘控制div移动： HTML代码： ``` <div id="box"></div> ``` CSS代码： ``` #box { position: absolute; width: 100px; height: 100px; background-color: red; } ``` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值