1

ウィンドウを横切って（2行で）移動する画像があります。ページタブを離れると、そこに戻ると、すべての画像が互いに積み重ねられます。
JSコード（jfriend00へのクレジット）

function startMoving(img) {

        var img$ = $(img);
        var imgWidth = img$.width();
        var screenWidth = $(window).width();
        var amount = screenWidth - parseInt(img$.css("left"), 10);
        // 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() {
        $(".thumbnails").each(function() {

            startMoving(this);
        });
    });
});

htmlコード： 

   <div id="thumbnails_wrapper">
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:100px" class="thumbnails"/>
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:200px"
        class="thumbnails"/>
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:0px;left:300px"
        class="thumbnails"/>
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:100px" class="thumbnails"/>
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:200px" class="thumbnails"/>
          <img src="http://d17g46tfi0dv3u.cloudfront.net/8294/148294_e492b405eed74bc3ba9f994affac423c.jpg" onload="startMoving(this)" style="top:100px;left:300px" class="thumbnails"/>

    </div>

CSSコード： 

#thumbnails_wrapper{
    position:absolute;
    width:100%;

    height:147px;
background-color: rgba(150, 150, 150, 0.4);

}
.thumbnails{
    position:absolute;
    border:1px solid white;

}

実例： http： //jsfiddle.net/ScTMP/

4

2 に答える 2

1

Well, you already know that your application is going haywire. The problem is your function that runs infinitely and is out of your control (i.e., when the visitor opens a new tab and moves away from the active window).

You have to be very careful with functions that call themselves. Creating infinite loops can eat up CPU resources and crash the visitor's browser.

しかし、JavaScript の window オブジェクトを使用してアニメーションを制御する方法があります。ブラウザで 4 つのタブを開いたとします。ブラウザーは、これらのタブごとに 1 つのウィンドウ オブジェクトを作成します。window オブジェクトの onblur および onfocus イベント ハンドラーを使用して、訪問者がブラウザー レベルで何をしているかを調べることができます。

goMoving();
window.onblur = stopMoving;
window.onfocus = goMoving;

var int;

function goMoving() {
    int = setInterval(function() {
        moveTheBoxes();            
    }, 400); //TODO (AzizAG): Rework the timer function
}

function stopMoving() {
    window.clearInterval(int);
}

function startMoving(img) {
    /* Animation */
}

成功の鍵は 2 ～ 3 行目です。goMoving 関数は、 moveTheBoxes を何度も呼び出すための新しい方法です。したがって、アニメーションを変更します。

.animate({
    left: "+=" + amount
}, time, "linear");
于 2012-05-26T23:20:57.757 に答える
0

これは、Chrome と Firefox で最近気づいたことです。別のタブに移動して戻ってくると、アニメーションがおかしなことをしているように見えます。私はまだ良い解決策を見つけていませんが、あなたは一人ではありません。

于 2012-05-26T20:08:34.010 に答える