Question

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

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

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

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

功能＆＃34; MoveDown（）＆＃34;是这样的：

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

由于某种原因，当我加载网页时，图片就位于左上方。我曾希望for循环会增加＆＃34; top＆＃34;每次都是1px的值，直到它停止时触摸窗口的底部为止。

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

如果有人能提供帮助就会很棒。

*我收集宽度，因为我希望图像对角移动，但我想如果我向下移动，我可以轻松地改变代码，使其同时横向移动。

Answer 1

您的图片样式是否有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

在重读你的问题时，你的这个循环看起来像一个无限循环。考虑为它添加一个停止规则，或者如评论中所建议的那样 - 如果你不需要某种滑动动画，只需为bottom: 0

添加css规则

Answer 2

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

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 3

您希望使用setTimeout或setInterval（我永远不会记住）一些间隔和一个每次运行时增加最高值的函数。然后在图像到达目的地时取消超时/间隔！

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

3 个答案: