Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - Xếp chồng hình ảnh (chồng chéo) khi rời khỏi tab cửa sổ

In lại Tác giả: Walker 123 更新时间：2023-11-28 18:44:31 27 4
mua khóa gpt4 Nike

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

   

          
          
        class="thumbnails"/>
          
        class="thumbnails"/>

CSS 代码:

#thumbnails_wrapper{
    vị trí: tuyệt đối;
    chiều rộng: 100%;

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

}
.thumbnails{
    vị trí: tuyệt đối;
    border:1px solid white;

}

实例:http://jsfiddle.net/ScTMP/

câu trả lời hay nhất

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

你必须非常小心调用自己的函数。创建无限循环会耗尽 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");

关于javascript - 离开窗口选项卡时图像堆叠(重叠)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10769229/

27 4 0
Đề xuất bài viết: android - 为什么要开发 iOS/Android 应用来替代网页？
Đề xuất bài viết: python - 如何以编程方式创建重复图像模式？
Đề xuất bài viết: iphone - UIView 触摸问题/问题
Đề xuất bài viết: jquery - 将边框图像与背景图像对齐；
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress