Javascript，包含窗口边缘内的图像

Javascript, contain image inside windows edges

本文关键字：图像 边缘 窗口 包含 Javascript      更新时间：2024-04-03

我正在尝试学习更多的javascript，现在我只是在玩事件侦听器方法。我制作了一个简单的HTML文档，其中包含一个包含背景图像的div。我已经成功地使图像在正确的按键下移动。我现在要做的是防止图像通过窗口的边缘。

我知道window.innerWidth和window.innerHeight给出了窗口的大小，但我不知道如何使用它来限制图像的移动。

html：

    <script type="text/javascript" src="code.js"></script>
</body>
</html>

样式内部.css:

 body{
}
#image{
    position: absolute;
    height: 80px;
    width: 80px;
    background: url("../img/image.png");
    background-size: 80px;
    background-repeat: no-repeat;
}

代码内部.js:

(function() {
    var image;
    var count, left, top;
    image = document.getElementById('image');
    count = 30;
    left = 200;
    top = 200;
    image.style.left = left + "px";
    image.style.top = top + "px";
    document.addEventListener("keydown", function(event) {
        var key = event.keyCode || event.which;
        left = image.offsetLeft;
        top = image.offsetTop;
        switch(key) {
            case 37:
            left -= count;
            break;
            case 38:
            top -= count;
            break;
            case 39:
            left += count;
            break;
            case 40:
            top += count;
            break;
       }
       image.style.left = left + "px";
       image.style.top = top + "px";
});
});

PS。我只想使用普通的JavaScript。请不要jQuery。：）

将其移动限制在窗口的左侧和顶部应该非常直接。当图像位于屏幕顶部时，其offsetTop将为0。在左边，它的offsetLeft将为0。所以你可以在切换语句后添加这个：

if (left < 0) {
    left = 0;
}
if (top < 0) {
    top = 0;
}

不过这太冗长了。我更喜欢使用Math.min（）和Math.max（）——它们是内置的Javascript函数。因此，我建议你这样做：

left = Math.max(0, left);
top  = Math.max(0, top);

现在，右边界和下边界有点棘手。您已经发现offsetLeft和offsetTop。元素还具有offsetWidth和offsetHeight属性。这些表示元素从其边界的外边缘占据的渲染像素数。我们现在不了解所有细节。您还找到了window.innerWidth和window.innerHeight。因此，您可以说最大左坐标应该是window.innerWidth - image.offsetWidth。同样，我们可以使用"if"语句来实现这一点，但我更喜欢使用内置的数学函数来实现此目的。

left = Math.min(left, window.innerWidth - image.offsetWidth);
top  = Math.min(top, window.innerHeight - image.offsetHeight);

所以，在switch语句和Voila之后加上这4行！您的图像将受到窗口限制。

相关文章：