javascript - 移动图像不能超出窗口 DOM

Question

我正在使用 4 个按钮在 javascript 中创建一个脚本来控制图像的移动，用户可以将图像移动到顶部、底部、左侧和右侧，但图像不能走到窗外，应该保持在里面，但我不知道如何保持它在里面。从老式的老式 pin pon 游戏中想象球保持在窗口 DOM 内。

这是html代码:

<img class="c1" id="imagen" src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png"/>

<input type="button" value="Arriba" onclick="MoverArriba();" />
<input type="button" value="Abajo" onclick="MoverAbajo();" />
<input type="button" value="Derecha" onclick="MoverDerecha();" />
<input type="button" value="Izquierda" onclick="MoverIzquierda();" />

这是javascript代码:

var birdX = 0;

        function MoverArriba() {
            var bird = document.getElementById("imagen");

            birdX -= 1;
            bird.style.transform = "translateY(" + birdX + "px)";

        }

        function MoverAbajo() {
            var bird = document.getElementById("imagen");
    alert("hello");

            birdX += 1;
            bird.style.transform = "translateY(" + birdX + "px)";
    alert("hello2");

        }

        function MoverDerecha() {
            var bird = document.getElementById("imagen");

            birdX += 1;
            bird.style.transform = "translateX(" + birdX + "px)";

        }

        function MoverIzquierda() {
            var bird = document.getElementById("imagen");

            birdX -= 1;

            bird.style.transform = "translateX(" + birdX + "px)";

        }

fiddle -> https://jsfiddle.net/7vyokgup/1/

谢谢

Answer 1

你会做到这一点......用数学! :D 给图像一个绝对位置，left 和 top 设置为 0；这将对您以后有很大帮助，因为您所有的数字都将相对于 (0,0)。

当您向左或向上移动时，只需确保该值永远不会低于 0；那是容易的部分。更难的部分是向右和向下移动。您需要确保 x 和 y 不超出屏幕的宽度和高度。幸运的是，我们可以使用一些属性! document.body.clientWidth 和 document.body.clientHeight 将分别返回窗口的宽度和高度。因此，当向右或向下移动时，只需确保值不会增长到大于窗口的宽度或高度——减去图像的宽度和高度，当然，因为位置是从左上角开始的:)