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

Answer 2

这是我最近在Chrome和Firefox中注意到的。当你去另一个标签并回来时，动画似乎做了一些时髦的事情。我还没有找到一个好的解决方案，但你并不孤单。

离开窗口选项卡时堆叠（重叠）的图像

2 个答案: