javascript - JQuery如何防止图片跳出窗口

Question

我正在尝试使用向上、向下、向左和向右箭头键在屏幕上移动一个简单的图像。它工作正常，只是图像一直在窗外，我看不到。我想要做的是将图像保持在窗口范围内，而不是超出范围。

这是我的代码:

let height = $(window).height();
let width = $(window).width();

$(document).keydown(function(key) {
  switch (parseInt(key.which, 10)) {
    // Left arrow key pressed
    case 37:
      if ($('img').position().left > 0) {
        $('img').animate({
          left: "-=20px"
        }, 'fast');
      }
      break;
      // Up Arrow Pressed
    case 38:
      if ($('img').position().top > 0) {
        $('img').animate({
          top: '-=20px'
        }, 'fast');
      }
      break;
      // Right Arrow Pressed
    case 39:
      if ($('img').position().left < width) {
        $('img').animate({
          left: '+=20px'
        }, 'fast');
      }
      break;
      // Down Arrow Pressed
    case 40:
      if ($('img').position().top < height) {
        $('img').animate({
          top: '+=20px'
        }, 'fast');
      }
      break;
  }
});

body {
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
  /*This is the solution*/
}

img {
  position: relative;
  left: 0;
  top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<img src="http://pngimg.com/uploads/mario/mario_PNG129.png" />

Answer 1

看来您只需要再考虑一次计算。以向右移动为例，如果图片当前向右位置距离屏幕边缘5px，会发生什么情况？然后 ($('img').position().right > width) 将计算为 true 并且它将移动 20px，使其离开屏幕 15px。

因此，您只需要考虑这种潜力。

if($('img').position().right > 0){
    distance = ( ($('img').position().left - width) < 20 ) ? ($('img').position().left - width) : 20;
    $('img').animate({left: "+="+distance+"px"}, 'fast');
}

这里说的是，如果图片的当前位置距离右边缘小于20px，则只移动该差值，否则移动20px。

需要对底部应用类似的逻辑，以确保图像不会移动超过屏幕的高度。

我建议对底部和左侧也应用相同的逻辑。它目前没有移出屏幕的原因是因为您是从 0,0 开始并一次移动 20px。它总是会回到 0,0。但是，如果您必须将它向右移动 12px 以保持在边界内，那么当您将它移回原位时，您可能会在左侧遇到同样的问题。希望这是有道理的。