文章地址 https://www.cnblogs.com/sandraryan/

功能： 点击上下左右按钮，移动元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .box {

        width: 100px;

        height: 100px;

        background-color: lightblue;

        position: fixed;

        top: 0;

        left: 0;

    }

    </style>

</head>

<body>

    <div class="box"></div>

    <script>

    var box = document.querySelector('.box');

    // 文档绑定点击时间

    document.onkeydown = function(ev){

        var e = ev || event;

        // 获取当前元素的左，上位置

        var l = box.offsetLeft;

        var t = box.offsetTop;

        // 比较按下的键的键码，是上下左右就像上下左右移动

        // （会移出页面，可以加父元素控制移动范围，或在js中判断超过某一值停止移动）

        switch(e.keyCode){

            case 37:

            l -= 5;

            break;

            case 38:

            t -=5;

            break;

            case 39:

            l += 5;

            break;

            case 40:

            t +=5;

        }

        // 重新设置top left

        box.style.left = l + 'px';

        box.style.top = t + 'px';

    }

    </script>

</body>

</html>

js键盘按下移动元素的更多相关文章

  1. js获取键盘按下的键值event.keyCode,event.charCode,event.which的兼容性

    js获取键盘按下的键值有event.keyCode,event.charCode和event.which 其中: 谷歌浏览器对event.keyCode,event.charCode和event.wh ...

  2. js键盘事件和焦点事件

    键盘事件onkeydown //当键盘按下的时候触发onkeyup //但键盘抬起的时候触发event.keyCode //数字类型 键盘按键的键值功能键 ctrlkey shiftkey altke ...

  3. JS列表的下拉菜单组件(仿美化控件select)

    JS列表的下拉菜单组件(仿美化控件select) 2014-01-23 23:51 by 龙恩0707, 1101 阅读, 6 评论, 收藏, 编辑 今天是农历23 也是小年,在这祝福大家新年快乐!今 ...

  4. Js键盘事件全面控制，回车按键事件，键盘对应按键码，按键事件兼容各个浏览器。

    在网上查询的按键码如下: 一.键盘按键和键盘对应代码表:   字母按键码A <--------> 65 B <--------> 66 C <--------> 6 ...

  5. js键盘事件全面控制详解

      js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件 ...

  6. jquery层级原则器（匹配前一个元素后的下一个元素，必须是挨着的）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 如何借助浏览器Console使用Js进行定位和操作元素

    在进行Selenium自动化过程中,我们很难避免一些webdriver 很难定位到的一些元素(如:默认隐藏属性元素),那对于一些比较难定位到的元素,有什么好的解决办法?     其实我们都知道,Sel ...

  8. js键盘事件全面控制

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

  9. js键盘事件全面控制详解【转】

    js键盘事件全面控制 主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型 ...

随机推荐

  1. webpack学习之—— Loaders

    loader 用于对模块的源代码进行转换.loader 可以使你在 import 或"加载"模块时预处理文件.因此,loader 类似于其他构建工具中“任务(task)”,并提供了 ...

  2. CSS-DOM的小知识(一)

    在DOM编程艺术中,CSS-DOM应用很广泛. 1.style属性 通过element.style.property可以获得元素的样式,但是style属性只能够返回内嵌样式,对于外部样式表的样式和he ...

  3. screen 基础用法（转）

    ####################### 屏幕分割 ######################## 1. screen2. Ctrl-a c    # create a new screen3 ...

  4. 高效整洁CSS代码原则（上）

    CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Re ...

  5. 使用 javascript 替换 jQuery

    使用 javascript 替换 jQuery jQuery 曾风靡一个时代,大大降低了前端开发的门槛,丰富的插件也是前端开发者得心应手的武器库,但是,这个时代终于要落幕了.随着 JS 标准和浏览器的 ...

  6. vue 微信内H5调起支付

    在微信内H5调起微信支付,主要依赖于一个微信的内置对象WeixinJSBridge,这个对象在其他浏览器中无效. 主要代码: import axios from 'axios'; export def ...

  7. font-weight

    font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗.数字值 400 相当于 关键字 normal,700 等价于 bold. 每个数字值对应的字体加粗必须至少与 ...

  8. python的数据类型和变量

    数据类型 计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形.音频.视频.网页等各种各样的数据,不同的数据,需要定 ...

  9. 【JZOJ2758】【SDOI2012】走迷宫(labyrinth)

    ╰(￣▽￣)╭ Morenan 被困在了一个迷宫里. 迷宫可以视为 N 个点 M 条边的有向图,其中 Morena n处于起点 S , 迷宫的终点设为 T . 可惜的是 , Morenan 非常的脑小 ...

  10. 洛谷P3455 [POI2007]ZAP-Queries （莫比乌斯反演）

    题意:求$\sum_{i=1}^{a}\sum_{j=1}^{b}[gcd(i,j)==d]$(1<=a,b,d<=50000). 很套路的莫比乌斯反演. $\sum_{i=1}^{n}\ ...