文章地址 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. JSON和JSONP，原来ajax引用这个来实现跨域访问的

    由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯 ...

  2. 【教程】5分钟在PAI算法市场发布自定义算法

    概述 在人工智能领域存在这样的现象,很多用户有人工智能的需求,但是没有相关的技术能力.另外有一些人工智能专家空有一身武艺,但是找不到需求方.这意味着在需求和技术之间需要一种连接作为纽带. 今天PAI正 ...

  3. 【Pyqt5】自定义信号简单原理（易懂版）,多窗口交互，传输数据，调用方法

    PS:如果你想在2窗口调用1窗口的内部方法,或者在2窗口传递数据给1窗口数据,本片博客可以放心食用 主窗口: class MainWindow(QWidget,Ui_MainFrom): insert ...

  4. JavaScript 生成32位UUID

    function uuid(){ var len=32; //32长度 var radix=16; //16进制 var chars='0123456789ABCDEFGHIJKLMNOPQRSTUV ...

  5. Leetcode693.Binary Number with Alternating Bits交替位二进制数

    给定一个正整数,检查他是否为交替位二进制数:换句话说,就是他的二进制数相邻的两个位数永不相等. 示例 1: 输入: 5 输出: True 解释: 5的二进制数是: 101 示例 2: 输入: 7 输出 ...

  6. 如何用SPSS分析学业情绪量表数据

    如何用SPSS分析学业情绪量表数据 1.数据检验.由于问卷.量表的题目是主观判断和选择,因而难免有些人不认真填,所以,筛选出有效.高质量的数据非常关键.通常需要作如下检查:(1)是否有人回答互相矛盾, ...

  7. Python2 生成器 简介

    1. A generator: provide a kind of function that can return an intermediate result ("the next va ...

  8. 集合--Map&&HasMap和TreeMap

    特点:以键值对key,value方式存储的结构     key:Set集合 key能重复,无序的,如果重复,后面的key会把前面的覆盖掉(key必须是唯一的,不唯一,那么后面的value会把前面的va ...

  9. 洛谷P2522 [HAOI2011]Problem b （莫比乌斯反演+容斥）

    题意:求$\sum_{i=a}^{b}\sum_{j=c}^{d}[gcd(i,j)==k]$(1<=a,b,c,d,k<=50000). 是洛谷P3455 [POI2007]ZAP-Qu ...

  10. 关于Apple Watch，听听开发了两个月Watch App的工程师怎么说

    今年1月份有幸应苹果邀请,秘密参与苹果 Watch App 的真机现场调试.4月份,Apple Watch 会正式上市.在这之前,也算是亲自抢先体验了 Apple Watch,以及开发了一下 Watc ...