0

marquee tag関数を使用して一連の画像をアニメーション化することで jQueryに実装し、animate()それらを右または左方向に移動させようとしています。
しかし、一枚の画像が画面の端まで行き、個別 に反対側に戻るタイミングがわかりませんでした。
ウィンドウサイズはブラウザごとに一定ではないと聞いたので、それを実装する方法はありますか?
これは私がこれまでに思いついたものです（シンプルで基本的なものです）：

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

});

注：SOで関連する質問を検索しましたが、特定の問題に関する正確な情報を見つけることができませんでした。

4

1 に答える 1

2

これは、画像を画面上で移動してから反対側で再開し、ウィンドウ幅に適応する基本的なスクリプトです。

あなたはそれがここで働いているのを見ることができます：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);
        });
    });
});

</ p>

于 2012-05-23T01:44:42.087 に答える