Question

I have images that move cross the window(in 2 lines), when I leave the page tab,then going back to it all of the images are stacked on each other.
JS code(credits to 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/"rel="没有跟随 nofollow noreferrer">http://jsfiddle.net/ScTMP/

Answer 1

您已经知道您的应用程序正在发展。问题在于您的功能无穷无尽地运行, 并且超出您的控制范围( 即当访问者打开新标签并移动离开活动窗口时 ) 。

您必须非常小心地使用自称为自己的函数。创建无限循环可以吞噬 CPU 资源, 并崩溃访问浏览器。

但您有办法使用 JavaScript s 窗口对象控制动画。可以说您在浏览器中打开了四个标签。浏览器为每个标签创建了一个窗口对象。您可以使用窗口对象 s onblur 和焦点事件处理器来了解访问者在浏览器级别上在做什么 :

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 */
}

成功 < / strong > 的 < strong > 密钥是线2-3。移动函数是您一次又一次调用移动TheBoxes 的“ strong > new

.animate({
    left: "+=" + amount
}, time, "linear");

Answer 2

这是我最近在铬和火狐中注意到的。当你去另一个标签然后回来的时候,动画似乎会做一些有趣的事。我还没有找到一个好的解决方案,但你并不孤单。

友情链接