使用 Javascript 将图像向下移动屏幕

Question

我想将我的图像从屏幕左上角移到左下角。我在 body 加载时调用了两个函数：

window.onload = function() {
MoveRight();
MoveDown();
};

然后我检索客户端浏览器窗口的宽度和高度（以确保动画在到达窗口两侧时停止）：

document.body.style.height = height;
document.body.style.width = width;

函数“MoveDown()”是这样的：

function MoveDown(){
for(var i = 0; i < ; i++)
    {
       document.getElementById("Amanda").style.top=+i;
    }
}

由于某种原因，当我加载网页时，图片只是位于左上角。我曾希望 for 循环每次都会将“顶部”值增加 1px，直到它停止时触及窗口底部。

如果有帮助，图像位置设置为相对，left 和 top 都设置为 0px。

如果有人能帮忙就太好了。

*我收集宽度是因为我希望图像沿对角线移动，但我想如果我向下移动，我可以轻松更改代码以使其同时向侧面移动。

Answer 1

它不移动的原因很可能是（取决于浏览器），因为您没有设置单位。试试

document.getElementById("Amanda").style.top=i+"px";

但是，您会发现它是直接向下跳而不是动画。原因是您的循环一次性执行，而没有给浏览器重绘的机会。有很多方法可以解决这个问题，但一种简单的方法是这样的

function MoveDown() {
    var i=0;
    function step() {
       document.getElementById("Amanda").style.top=i+"px";
       i++;
       if (i<=100) setTimeout(step,10);
    }
    step();
}

Answer 2

您是否有position: absolute 或position: relative（或position: fixed）作为您的图片样式？ 问这个是因为top 仅适用于定位元素（默认情况下元素有position: static，即它们没有显式定位）。 见https://developer.mozilla.org/en-US/docs/Web/CSS/top和https://developer.mozilla.org/en-US/docs/Web/CSS/position

在重读您的问题时，您的这个循环看起来像是一个无限循环。考虑为其添加停止规则，或者按照 cmets 中的建议 - 如果您不需要某种滑动动画，只需将 css 规则放入 bottom: 0

Answer 3

您会想要使用setTimeout 或setInterval（我记不得了），并带有一些间隔和一个每次运行时递增顶部值的函数。然后在图像到达目的地时取消超时/间隔！