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 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
javascript事件模型介绍
May 31 Javascript
jQuery图片轮播插件——前端开发必看
May 31 Javascript
Validform表单验证总结篇
Oct 31 Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 Javascript
jQuery实现frame之间互通的方法
Jun 26 jQuery
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
vue webpack开发访问后台接口全局配置的方法
Sep 18 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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基础教程 php内置函数实例教程
2012/08/21 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
12个非常有创意的JavaScript小游戏
2010/03/18 Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
微信小程序实现图片自适应(支持多图)
2017/01/25 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
详解vue路由篇(动态路由、路由嵌套)
2019/01/27 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
js实现无缝滚动双图切换效果
2019/07/09 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
django数据库migrate失败的解决方法解析
2018/02/08 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
对python中不同模块(函数、类、变量)的调用详解
2019/07/16 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
余弦相似性计算及python代码实现过程解析
2019/09/18 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
python 调用Google翻译接口的方法
2020/12/09 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
荷兰睡眠专家:Beter Bed
2020/11/23 全球购物
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
酒店实习个人鉴定
2013/12/07 职场文书
机电一体化自荐信
2013/12/10 职场文书
夏季奶茶店创业计划书
2014/01/16 职场文书
会议欢迎词范文
2015/01/27 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL