javascript - 使一组图像移动穿过屏幕，然后当离开窗口时，它从另一侧出现

Question

我试图在 jQuery 中通过使用 animate() 函数对一组图像进行动画处理来实现 marquee 标记，使它们向右或向左移动。
但是，我无法弄清楚单个图像何时到达屏幕末端单独返回到另一侧。
因为我听说每个浏览器的窗口大小都不是恒定的，那么有没有办法实现呢？
这就是我到目前为止所想到的(简单而基本):

$(document).ready(function(){
    moveThumbs(500);
    function moveThumbs(speed){
        $('.thumbnails').animate({
            right:"+=150"
        }, speed);
        setTimeout(moveThumbs, speed);
    }

});

注意:我在 SO 中搜索了相关问题，但没有运气找到我的具体问题的确切信息。

Answer 1

这是一个基本脚本，它将图像移动到屏幕上，然后在另一侧恢复并适应窗口宽度。

您可以在这里看到它的工作情况:http://jsfiddle.net/jfriend00/rnWa2/

function startMoving(img) {
    var img$ = $(img);
    var imgWidth = img$.width();
    var screenWidth = $(window).width();
    var amount = screenWidth - (parseInt(img$.css("left"), 10) || 0);
    // if already past right edge, reset to 
    // just left of left edge
    if (amount <=0 ) {
        img$.css("left", -imgWidth);
        amount = screenWidth + imgWidth;
    }
    var moveRate = 300;   // pixels per second to move
    var time = amount * 1000 / moveRate;
    img$.stop(true)
        .animate({left: "+=" + amount}, time, "linear", function() {
            // when animation finishes, start over
            startMoving(this);
        })
}

$(document).ready(function() {
    // readjust if window changes size
    $(window).resize(function() {
        $(".mover").each(function() {
            startMoving(this);
        });
    });
});

​​