使用Javascript在屏幕下移动图像

我想把我的图像从左上角移到左下角。当主体加载时，我调用两个函数：

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

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

函数“MoveDown（）”如下所示：

函数MoveDown（）{
对于（变量i=0；i<；i++）
{
document.getElementById（“Amanda”）.style.top=+i；
}
}

由于某种原因，当我加载网页时，图像就位于左上角。我曾希望for循环每次将“top”值增加1px，直到它碰到窗口底部时停止

如果有帮助，图像位置将设置为相对，左侧和顶部都设置为0px

如果有人能帮忙，那就太好了

---

*我收集宽度是因为我希望图像沿对角线移动，但我认为如果我向下移动，我可以很容易地更改代码，使其同时横向移动。

您是否有

位置：绝对

或

位置：相对

（或

位置：固定

）作为图像的样式？ 问这个问题是因为

top

仅适用于定位元素（默认情况下，元素具有

position:static

，即它们没有明确定位）。 看到和

---

在重读你的问题时，你的这个循环看起来像一个无止境的循环。考虑为它添加一个停止规则，或者如注释中所建议的那样——如果不需要某种滑动动画，只需将CSS规则放在<代码>底部：0

< p>您将希望使用<代码> SETTIMEOUT 或<代码> SETIFATION< /COD>（我永远记不住）具有一定的时间间隔和每次运行时递增最大值的函数。然后在图像到达目标时取消超时/间隔

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

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();
}

函数MoveDown（）{
var i=0；
函数步骤（）{
document.getElementById（“Amanda”）.style.top=i+“px”；
i++；
如果（I）有任何理由不将其设置为绝对值，并将其底部设置为0？是的，因为我想要动画，因此每次运行时都要循环将像素增加1。感谢我将其设置为“相对”，顶部设置为0px。for循环在达到“高度”时不会停止吗？我已将高度定义为浏览器窗口高度。谢谢！谢谢Gonzofish。我的函数MoveDown（）的代码如下：但仍然不起作用。我使用SetTimeout添加了一个延迟。只是为了确认图像在任何地方都没有移动，它停留在左上角。非常感谢，这正是我要找的！
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();
}