文章地址 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. LUOGU P1081 开车旅行 （noip 2012）

    传送门 解题思路 这道题刚了一下午,主要就刚在set那里了.先写了一个暴力70分..之后优化预处理,看着大佬神犇们都用的什么双向链表之类的东西,本蒟蒻不会,又懒得手写平衡树,就拿了个set搞了搞,感觉 ...

  2. Python单元测试浅析

    测试的意义   人们针对一个具体问题,通过分析和设计,最后用编程语言写出了一个程序,如果它通过了语言解释器(编译器)的检查,可以运行了,那么下一步的工作就是设法确认它确实满足了我们需求.这篇文章就是讨 ...

  3. Spring boot--控制器增强

    在Spring3.2中,新增了@ControllerAdvice注解.关于这个注解的官方说明https://docs.spring.io/spring-framework/docs/5.0.0.M1/ ...

  4. facebook登录深入研究

    PHP sdk https://developers.facebook.com/docs/php/gettingstarted javascript对接PHP https://developers.f ...

  5. 两种RBAC权限控制模型详解

    序言 由于最近一直卡在权限控制这个坎上,原来设计的比较简单的权限控制思路已经无法满足比较复杂一些的场景,因此一直在探索一种在大部分场景下比较通用的权限模型. 首先,这里说明一下两种RBAC权限模型分别 ...

  6. JMeter与LoadRunner的对比

    1. 界面.安装.协议支持.函数库.成本.开源 2. 都可以实现分布式负载,相对来说LoadRunner更强大一些 3. 都支持在windows和linux环境的负载生成器.控制台方面,Jmeter跨 ...

  7. iOS支付宝2.0 SDK集成整理

    https://cshall.alipay.com/enterprise/help_detail.htm?help_id=473890 http://wenku.baidu.com/link?url= ...

  8. 寻找第K大数的方法总结

    http://www.cnblogs.com/zhjp11/archive/2010/02/26/1674227.html

  9. hdu4176 水题

    #include<stdio.h> #include<string.h> #include<algorithm> using namespace std; #def ...

  10. hdu2516 博弈

    找规律,发现时斐波那契数列:打表上. #include<stdio.h> #include<string.h> #define maxn 2147483647 __int64 ...