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之折叠面板的深入解析
Jun 19 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
jquery队列函数用法实例
Dec 16 Javascript
7个jQuery最佳实践
Jan 12 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 jQuery
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
VUE路由动态加载实例代码讲解
Aug 26 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
js里面的变量范围分享
Jul 18 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开发中常用的8个小技巧
2008/08/27 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
AngularJS中的过滤器使用详解
2015/06/16 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
javascript数组对象常用api函数小结(连接,插入,删除,反转,排序等)
2016/09/20 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
jQuery插件autocomplete使用详解
2017/02/04 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
vuex的简单使用教程
2018/02/02 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
python实现扫描日志关键字的示例
2018/04/28 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
通过python-pptx模块操作ppt文件的方法
2020/12/26 Python
芬兰灯具网上商店:Nettilamppu.fi
2018/06/30 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
企业年度评优方案
2014/06/02 职场文书
公司董事长岗位职责
2014/06/08 职场文书
起诉意见书范文
2015/05/19 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers
HTML5之高度塌陷问题的解决
2022/06/01 HTML / CSS
码云(gitee)通过git自动同步到阿里云服务器
2022/12/24 Servers