向左键向下键盘以使用JS移动对象

时间:2017-01-30 18:23:30

标签: javascript

我想让图像在屏幕上向左右移动。 它只会上下移动 我无法修复我的代码

这是我到目前为止所做的工作

frame.on ("keydown", function(e)  {
  zog(e.keyCode); // e is an event object
  if (e.keyCode == 38) {
    dir = -1;
  } else if(e.keyCode == 40){
    dir = 1;
  } else if (e.keyCode == 37){ //left
    dir = 0;
  } else if (e.keyCode == 39){ //right
    dir = 0;
  }
});
frame.on ("keyup", function()  {
  dir = 0;
});

1 个答案:

答案 0 :(得分:0)

每次按键盘上的箭头按钮时,以下内容都会更新框位置。请记住,向上/向下会使页面向上/向下滚动。但这是一个难以解决的问题;)

(function($){$(function(){
var box = $('.box');
  
  $('body').on('keyup', function(e){
    if (e.keyCode == 38) {
      box.css('top', box.offset().top - 1);
    } else if(e.keyCode == 40){
      box.css('top', box.offset().top + 1);
    } else if (e.keyCode == 37){ //left
      box.css('left', box.offset().left - 1);
    } else if (e.keyCode == 39){ //right
      box.css('left', box.offset().left + 1);
    }
  });
  
})})(jQuery);
.box {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  position: absolute;
  top: 0px;
  left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>