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 相关文章推荐
JQuery 图片的展开和伸缩实例讲解
Apr 18 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
JavaScript实现省市联动效果
Nov 22 Javascript
js实现淘宝首页的banner栏效果
Nov 26 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
ES6函数和数组用法实例分析
May 23 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
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
javascript对象的property和prototype是这样一种关系
2007/03/24 Javascript
JS自动缩小超出大小的图片
2012/10/12 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
node.js入门教程
2014/06/01 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
python调用短信猫控件实现发短信功能实例
2014/07/04 Python
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
详解python中的线程
2018/02/10 Python
python实现停车管理系统
2018/11/30 Python
Python 实现两个服务器之间文件的上传方法
2019/02/13 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
Python Opencv图像处理基本操作代码详解
2020/08/31 Python
python如何停止递归
2020/09/09 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
美国波西米亚风格精品店:South Moon Under
2019/10/26 全球购物
JPA的优势都有哪些
2013/07/04 面试题
美容院考勤制度
2014/01/30 职场文书
作风大整顿心得体会
2014/09/10 职场文书
信息与工商管理职业规划范文:为梦想而搏击
2014/09/11 职场文书
python - timeit 时间模块
2021/04/06 Python
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
一篇带你入门Java垃圾回收器
2021/06/16 Java/Android
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers