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

好吧，你已经知道你的应用程序出了问题。问题是您的函数无限运行并且不受您的控制（即，当访问者打开一个新选项卡并离开活动窗口时）。

您必须非常小心调用自身的函数。创建无限循环会消耗 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");
于 2012-05-26T23:20:57.757 回答
0

这是我最近在 Chrome 和 Firefox 中注意到的。当您转到另一个选项卡并返回时，动画似乎会做一些时髦的事情。我还没有找到一个好的解决方案，但你并不孤单。

于 2012-05-26T20:08:34.010 回答