原生js实现键盘控制div移动且解决停顿问题

首先说明下为什么会停顿？

效果 ：用键盘控制一个div移动

当按下一个方向键不放，div会先停顿一下，然后才开始持续移动。

原因：系统要区分用户是否连续输入，第一个到第二个之间有一个停顿时间
注：了解原因才能解决问题

效果展示

1.简单控制，但是有停顿

2.简单控制，解决停顿

解决方法

方法 ：先开一个定时器，让div一直处于（往4个方向）准备移动的状态

初始4个方向的值都是false，div就保持在原地不动。

按下某个方向键，这个方向的值就改变为true，div就会开始往这个方向移动。

松开方向键，这个方向的值就改变为false , div就停止这个方向移动了。

基本移动，但是有挺顿的代码

<html>
<head>
  <title>键盘控制div移动，会有停顿</title>
  <meta charset="utf-8" />
  <style type="text/css">
    #div1{
        width:100px;
        height:100px;
        background:greenyellow;
        position:absolute;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var oDiv = document.getElementById("div1");
      document.onkeydown = function(ev){
        var ev = ev || event;
        var keyCode = ev.keyCode;
        switch(keyCode){
          case 37: oDiv.style.left = oDiv.offsetLeft-10+"px";break;
          case 38: oDiv.style.top = oDiv.offsetTop-10+"px";break;
          case 39: oDiv.style.left = oDiv.offsetLeft+10+"px";break;
          case 40: oDiv.style.top = oDiv.offsetTop+10+"px";break;
        }
      }

    }
  </script>
</head>
<body>
<div id="div1"></div>
</body>
</html

控制移动，解决停顿的问题 

<html>
<head>
  <title>键盘控制div移动并且解决停顿问题</title>
  <meta charset="utf-8" />
  <style type="text/css">

    /*设置div样式*/
    div{
      width:100px;
      height:100px;
      background: #68affc;
      position:absolute;
      left:100px;
      top:100px;
    }
  </style>
  <script>

    //当页面加载完后
    window.onload = function(){

      //获取Div元素
      var oDiv = document.getElementById("div1");

      //创建各个方向条件判断初始变量
      var left = false;
      var right = false;
      var top = false;
      var bottom = false;

      //当按下对应方向键时，对应变量为true
      document.onkeydown = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;
        switch(keyCode){
          case 37:
            left=true;
            break;
          case 38:
            top=true;
            break;
          case 39:
            right=true;
            break;
          case 40:
            bottom=true;
            break;
        }
      };

      //设置一个定时，时间为50左右，不要太高也不要太低
      setInterval(function(){

        //当其中一个条件为true时，则执行当前函数（移动对应方向）
        if(left){
          oDiv.style.left = oDiv.offsetLeft-10+"px";
        }else if(top){
          oDiv.style.top = oDiv.offsetTop-10+"px";
        }else if(right){
          oDiv.style.left = oDiv.offsetLeft+10+"px";
        }else if(bottom){
          oDiv.style.top = oDiv.offsetTop+10+"px";
        }
      },50);

      //执行完后，所有对应变量恢复为false，保持静止不动
      document.onkeyup = function(ev){
        var oEvent = ev || event;
        var keyCode = oEvent.keyCode;

        switch(keyCode){
          case 37:
            left=false;
            break;
          case 38:
            top=false;
            break;
          case 39:
            right=false;
            break;
          case 40:
            bottom=false;
            break;
        }
      }
    }
  </script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的工作或者学习能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • js拖动div 当鼠标移动时整个div也相应的移动

    HTML代码如下,其中,要拖动的div为最外层的div 复制代码 代码如下: <div id="dialog_createUserGroup" class="dialog_main" style=""> <div id="McreateUserGroup"> <div class="title"> <span class="poptitle"&g

  • 利用javascript移动div层-javascript 拖动层

    利用javascript移动div层-javascript 拖动层: 程序功能:利用javascript开发在界面上随意拖动以下html code中的div层. javascript移动div层-javascript 拖动层代码-html code: 复制代码 代码如下: <div id="div_Info" style="display: none; dz-index: 101; left: 175px; width: 650px; position: absolut

  • javascript DIV跟随鼠标移动

    首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o

  • js实现键盘控制DIV移动的方法

    本文实例讲述了js实现键盘控制DIV移动的方法.分享给大家供大家参考.具体分析如下: css样式部分: 复制代码 代码如下: <style type="text/css"> html,body{overflow:hidden;} body{margin:0;padding:0;} pre{color:green;padding:10px 15px;background:#f0f0f0;border:1px dotted #333;font:12px/1.5 Courier

  • javascript实现鼠标点击页面 移动DIV

    <script type="text/javascript"> //那种方式移动 var choMove = false; //是否绑定过click var isClick = true; //引用DIV var oDiv = null; //引用Input var oInput = null; //封装事件绑定的通用对象 var evnetUtil = { addEventHandle:function(oElement,evtype,fun){ oElement.att

  • javascript实现点击按钮让DIV层弹性移动的方法

    本文实例讲述了javascript实现点击按钮让DIV层弹性移动的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/

  • js实现键盘操作实现div的移动或改变的原理及代码

    昨天记录了获取键盘按键的值的事件,有了值,无非就是针对不同值做不同的操作嘛,而且之前曾经在写贪吃蛇时也用到过.结果一捯饬,又是好久的一段时间,所以感觉有必要记录下的,一方面确有可取之处,另一方面也对自己的提醒,刚刚实现过的功能转头又是陌生人了,总的来说,算是温故而知新吧. 这样我们先来分析,要实现键盘操作实现div的移动大概的原理吧: *---要实现div的移动,首先最关键的一点:获取div对象 *---postion:absolute将div完全从文档流中拖出啊,这个地方漏掉了,回去看了贪吃蛇

  • JS onmousemove鼠标移动坐标接龙DIV效果实例

    JS onmousemove鼠标移动坐标接龙DIV效果实例

    效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 20px;            height: 20px;

  • JavaScript与Div对层定位和移动获得坐标的实现代码

    1:移动图层 获得点的x轴y轴坐标,从而进行绝对定位(注意:竖拉框会影响 x 轴 y 轴坐标值) 复制代码 代码如下: var x,y,z,down=false,obj function init(){ obj=event.srcElement //事件触发对象 obj.setCapture() //设置属于当前对象的鼠标捕捉 z=obj.style.zIndex //获取对象的z轴坐标值 //设置对象的z轴坐标值为100,确保当前层显示在最前面 obj.style.zIndex=100 x=e

  • js+html+css实现鼠标移动div实例

    js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p

随机推荐