javascript - 使用 Javascript 向下移动图像

Question

我想将我的图像从屏幕左上角向下移动到左下角。我在主体加载时调用两个函数:

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 循环每次都会将“top”值增加 1px，直到它触及窗口底部时停止。

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

如果有人能提供帮助那就太好了。

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

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