js实现上下左右键盘控制div移动


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了js上下左右键盘控制div移动的具体代码,供大家参考,具体内容如下

描述:

div通过键盘事件上下左右实现div块的移动

效果: 

js实现上下左右键盘控制div移动

实现:

js:

var Method=(function () {
  return {
    EVENT_ID:"event_id",
    loadImage:function (arr) {
      var img=new Image();
      img.arr=arr;
      img.list=[];
      img.num=0;
//      如果DOM对象下的事件侦听没有被删除掉,将会常驻堆中
//      一旦触发了这个事件需要的条件,就会继续执行事件函数
      img.addEventListener("load",this.loadHandler);
      img.self=this;
      img.src=arr[img.num];
    },
    loadHandler:function (e) {
      this.list.push(this.cloneNode(false));
      this.num++;
      if(this.num>this.arr.length-1){
        this.removeEventListener("load",this.self.loadHandler);
        var evt=new Event(Method.EVENT_ID);
        evt.list=this.list;
        document.dispatchEvent(evt);
        return;
      }
      this.src=this.arr[this.num];
    },
    $c:function (type,parent,style) {
      var elem=document.createElement(type);
      if(parent) parent.appendChild(elem);
      for(var key in style){
        elem.style[key]=style[key];
      }
      return elem;
    },
    divColor: function () {
      var col="#";//这个字符串第一位为# 颜色的格式
      for(var i=0;i<6;i++){
        col+=parseInt(Math.random()*16).toString(16);//rondom*16后的随机值即为0-1*16==0-16;  toString(16)为转化为16进制
      }
      return col;//最后返回一个七位的值 格式即为#nnnnnn 颜色的格式
    },
    random:function (min,max) {
      max=Math.max(min,max);
      min=Math.min(min,max);
      return Math.floor(Math.random()*(max-min)+min);
    },
    dragElem:function (elem) {
      elem.addEventListener("mousedown",this.mouseDragHandler);
      elem.self=this;
    },
    removeDrag:function (elem) {
      elem.removeEventListener("mousedown",this.mouseDragHandler);
    },
    mouseDragHandler:function (e) {
      if(e.type==="mousedown"){
        e.stopPropagation();
        e.preventDefault();
        document.point={x:e.offsetX,y:e.offsetY};
        document.elem=this;
        this.addEventListener("mouseup",this.self.mouseDragHandler);
        document.addEventListener("mousemove",this.self.mouseDragHandler);
      }else if(e.type==="mousemove"){
        this.elem.style.left=e.x-this.point.x+"px";
        this.elem.style.top=e.y-this.point.y+"px";
      }else if(e.type==="mouseup"){
        this.removeEventListener("mouseup",this.self.mouseDragHandler);
        document.removeEventListener("mousemove",this.self.mouseDragHandler);
      }
    }
  }
})();

html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="js/Method.js"></script>
</head>
<body>
<script>
  var div;
  var code=[];
  var speed=2;
  var bool=false;
  init();
  function init() {
    div=Method.$c("div",document.body,{
      width:"50px",
      height:"50px",
      backgroundColor:"red",
      position:"absolute",
      left:0,
      top:0
    });
    window.addEventListener("keydown",keyHandler);
    window.addEventListener("keyup",keyHandler);
    setInterval(animation,16);
  }
 
  function keyHandler(e) {
    if(e.type==="keydown" && (!bool || code.indexOf(e.keyCode)===-1)){
      bool=true;
      code.push(e.keyCode);
    }else if(e.type==="keyup"){
      bool=false;
      code.length=0;
    }
  }
 
  function animation() {
    if(!bool)return;
    for(var i=0;i<code.length;i++){
      switch (code[i]){
        case 37:
          div.style.left=div.offsetLeft-speed+"px";
          break;
        case 38:
          div.style.top=div.offsetTop-speed+"px";
          break;
        case 39:
          div.style.left=div.offsetLeft+speed+"px";
          break;
        case 40:
          div.style.top=div.offsetTop+speed+"px";
          break;
      }
    }
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
javascript分页代码(当前页码居中)
Sep 20 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
利用jQuery插件imgAreaSelect实现获得选择域的图像信息
Dec 02 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
layui文件上传实现代码
May 20 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 #Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
js实现点击生成随机div
Jan 16 #Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 #Javascript
JS实现可视化音频效果的实例代码
Jan 16 #Javascript
js实现div色块碰撞
Jan 16 #Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
Jan 16 #Javascript
You might like
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
2014/03/26 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
浅谈Django中的数据库模型类-models.py(一对一的关系)
2018/05/30 Python
python实现字符串和字典的转换
2018/09/29 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Pygame的程序开始示例代码
2020/05/07 Python
Django --Xadmin 判断登录者身份实例
2020/07/03 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
五分钟学会HTML5的WebSocket协议
2019/11/22 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
自荐信怎么写好
2013/11/11 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
中韩经贸翻译专业大学生职业生涯规划范文
2014/09/18 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
初三数学教学反思
2016/02/17 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js