制作一组图像移动穿过屏幕，然后离开窗口时，它从另一个侧面来了 [英] Making a set of images move cross the screen then when leaving the window, it comes up from the other side

问题描述

我想通过动画来实现字幕标记在jQuery中使用的一组图像动画（）功能，使得它们移动到右侧或左侧方​​向上。结果，
但是，我无法弄清楚当单个图像会在屏幕返回个别以对方的结束。结果
因为我听说窗口大小并不是适用于所有浏览器恒定的，所以反正是有落实呢？结果
这就是我想出了到目前为止（它的简单和基本的）：

I'm trying to implement the marquee tag in jQuery by animation a set of images using animate() function, making them move to the right or left direction.
But, I couldn't figure out when a single image goes to the end of the screen returns individually to the other side.
Because I heard that the window size is not constant for every browser, So is there anyway to implement that?
this is what I came up so far(it's simple and basic):

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

});

注意：我搜查所以对于相关的问题，但没有运气找到我的具体问题的确切信息

note: I searched in SO for related questions, but had no luck to find exact information for my specific issue.

推荐答案

下面是在屏幕上移动的图像，然后继续在另一边，并适应窗口宽度一个基本的脚本。

Here's a basic script that moves an image across the screen and then resumes on the other side and adapts to the window width.

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

You can see it working here: 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);
        });
    });
});

这篇关于制作一组图像移动穿过屏幕，然后离开窗口时，它从另一个侧面来了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！