javascript - 离开窗口选项卡时图像堆叠(重叠)

Question

我有跨窗口移动的图像(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/

Answer 1

好吧，您已经知道您的应用程序正在失控。问题是您的功能无限运行并且不受您的控制(即，当访问者打开一个新选项卡并离开事件窗口时)。

你必须非常小心调用自己的函数。创建无限循环会耗尽 CPU 资源并使访问者的浏览器崩溃。

但是您可以使用 JavaScript 的窗口对象来控制动画。假设您在浏览器中打开了四个选项卡。浏览器为每个选项卡创建一个窗口对象。您可以使用窗口对象的 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");