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 相关文章推荐
JavaScript Event学习补遗 addEventSimple
Feb 11 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
Js实现自定义右键行为
Mar 26 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
Bootstrap图片轮播组件使用实例解析
Jun 30 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
layui插件表单验证提交触发提交的例子
Sep 09 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 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
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php实现的农历算法实例
2015/08/11 PHP
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
javascript实现数独解法
2015/03/14 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
js前端日历控件(悬浮、拖拽、自由变形)
2017/03/02 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
vue-router 前端路由之路由传值的方式详解
2019/04/30 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
学习python (1)
2006/10/31 Python
Python 学习笔记
2008/12/27 Python
Python类属性的延迟计算
2016/10/22 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
C#笔试题集合
2013/06/21 面试题
思想政治自我鉴定
2013/10/06 职场文书
销售高级职员求职信
2013/10/29 职场文书
奥巴马演讲稿
2014/01/08 职场文书
毕业证代领委托书
2014/09/26 职场文书
安全保证书
2015/01/16 职场文书
语文教师求职信范文
2015/03/20 职场文书
驻村工作简报
2015/07/20 职场文书
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL