如何使用jQuery防止图片移出窗口边界

你现在的方向键移动逻辑已经能正常工作，但边界判断忽略了图片自身的尺寸——只对比了窗口宽高和图片的left/top值，导致图片右侧、底部会移出窗口看不见。咱们调整一下判断逻辑就能解决这个问题。

核心修正思路 #

要让图片完全留在窗口内，得计算图片的最大可移动范围：

• 向右移动的极限：图片左侧的left值 + 图片自身宽度 ≤ 窗口宽度
• 向下移动的极限：图片顶部的top值 + 图片自身高度 ≤ 窗口高度

另外建议每次按键时重新获取窗口和图片的尺寸，避免窗口缩放后边界判断失效。

修正后的完整代码 #

HTML

<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" />

CSS

body {
  width: 100%;
  height: 100%;
  background: blue;
  overflow: hidden;
}

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

JavaScript

$(document).keydown(function(key) {
    // 每次按键时获取最新的窗口和图片尺寸
    const windowHeight = $(window).height();
    const windowWidth = $(window).width();
    const imgHeight = $('img').outerHeight();
    const imgWidth = $('img').outerWidth();
    const currentPos = $('img').position();

    switch (parseInt(key.which, 10)) {
        // 左箭头：不小于窗口左边界
        case 37:
            if (currentPos.left > 0) {
                $('img').animate({ left: "-=20px" }, 'fast');
            }
            break;
        // 上箭头：不小于窗口上边界
        case 38:
            if (currentPos.top > 0) {
                $('img').animate({ top: '-=20px' }, 'fast');
            }
            break;
        // 右箭头：图片右侧不超出窗口右边界
        case 39:
            if (currentPos.left + imgWidth < windowWidth) {
                $('img').animate({ left: '+=20px' }, 'fast');
            }
            break;
        // 下箭头：图片底部不超出窗口下边界
        case 40:
            if (currentPos.top + imgHeight < windowHeight) {
                $('img').animate({ top: '+=20px' }, 'fast');
            }
            break;
    }
});

额外小优化 #

• 用outerWidth()/outerHeight()代替基础宽高方法，能自动包含图片的padding、border尺寸，判断更准确。
• 如果需要支持窗口缩放后实时更新边界，可以添加$(window).resize()事件监听，动态更新窗口尺寸变量。

内容的提问来源于stack exchange，提问作者nTuply