文章地址 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. Scrollerview与listview或者gridview发生冲突

    滑动冲突说实在的就是子view的滑动事件与父view的滑动事件的监听都在同时触发,而导致的activity的点击事件或者布局出问题 常见的就有Scrollerview与Scrollerview与lis ...

  2. BootstrapValidator实现注册校验和登录错误提示效果（转）

    使用BootstrapValidator进行注册校验和登录错误提示,具体内容如下 1.介绍 在AdminEAP框架中,使用了BootstrapValidator校验框架,本文以注册校验的用户名.登录名 ...

  3. java jsp j2ee

    1. JavaScript用于编写嵌入在网页文档中的程序,它由浏览器负责解释和执行,可以在网页上产生动态的显示效果和实现与用户交互的功能,譬如,让一串文字跟着鼠标移动,让一个图标在网页漂浮移动,验证用 ...

  4. Thrift框架应用参考

    Thrift https://blog.csdn.net/aquester/article/details/48261609 https://www.cnblogs.com/liboBlog/p/60 ...

  5. Struts → 《Struts2程序开发》教材大纲

  6. oracle-Nomount

    启动实例但不安装数据库,当数据库以这个模式启动时,参数文件被读取,后台进程和内存结构被启动,但他们不被附加或与数据库的磁盘结构进行通信.这种模式下,数据库是不可使用的. 可以执行的任务是:运行一个创建 ...

  7. codechef Heavy-light Decompositions

    Heavy-light Decompositions Problem Code: HLDOTSSubmit All submissions for this problem are available ...

  8. WPF程序国际化

    1.创建相应的xaml文件 <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presen ...

  9. Git同步Python代码

    之前我们都是将代码保存到本地目录, 然后再上传到Git中,但如果针对在pycharm中的代码,就要换另一种方式了,下面简单介绍一下. 1.打开pycharm主界面,选择菜单栏VCS---checkou ...

  10. hdu5438 dfs+并查集 长春网赛

    先dfs对度小于2的删边,知道不能删为止. 然后通过并查集来计算每一个分量里面几个元素. #include<iostream> #include<cstring> #inclu ...