Question

我们需要实现一个屏幕保护程序，它应该有3个图像。

应修复底部图像。
中间图像会移动。
顶部图像将以相对较高的速度移动。

我们创建了3个div来处理图像，如下所示。

<!DOCTYPE html>
<html>
    <head>
        <title>Moving Screen Saver</title>
        <style>
            html, body {
                position: relative;
                height: 100%;
                width: 100%;
            }

            #bgimg {
                background-image: url("background/moon_bg.png");
                position: absolute;
                background-repeat: no-repeat;
                background-size: cover;
                width: 100%;
                height: 100%;
            }

            .animator {
                width: 100vw;
                height: 100vh;
            }

            #poster {
                background-image: url("posters/gladiator.png");
                position: absolute;
                background-position:right 20px bottom 20px;
                background-repeat: no-repeat;
                width: 100%;
                height: 100%;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div id="bgimg"></div>
        <div class="animator"></div>
        <div id="poster"></div>
        <script>
            var poster = document.getElementById('poster');
            var animate;

            function moveRight()
            {
                poster.style.left = poster.style.left || 0;
                poster.style.left = parseInt(poster.style.left) - 10 + 'px';
                requestAnimationFrame(moveRight);
            }

            moveRight();

            function rollAnimate(element, url) {
                if(!element instanceof HTMLElement)
                    return;
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                var img = new Image();
                var x = 0;
                var pattern;
                var framesPerSec = 10;

                img.onload = startDrawing;
                img.onerror = console.error;
                img.src = url;
                canvas.style.cssText = 'position:absolute;'

                function startDrawing() {
                    element.insertBefore(canvas, element.firstChild);
                    pattern = ctx.createPattern(img, 'repeat');
                    resize();
                    anim();
                    window.addEventListener('resize', resize, {passive: true});
                }

                function anim() {
                    x = (x - 1) % img.width;
                    ctx.setTransform(1,0,0,1,x,(canvas.height) - (img.height));
                    ctx.fill();
                    setTimeout(function() {
                        requestAnimationFrame(anim);
                        }, 1000 / framesPerSec);
                }

                function resize(evt) {
                    canvas.width = element.offsetWidth;
                    canvas.height = element.offsetHeight;
                    ctx.fillStyle =  pattern;
                    ctx.rect(0, canvas.height - img.height, canvas.width, img.height);
                    ctx.globalCompositeOperation = 'copy';
                }
            }

            rollAnimate(document.querySelector('.animator'), 'buildings/mod_cropped.png');
        </script>
    </body>
</html>

lower image - bgimg
中间图像 - 动画师
顶部图片 - 海报

能看到固定的下部图像和移动的中间图像。但海报图像不可见。我们认为这是因为当我们试图绘制中间图像时，它正在取代顶部图像。任何人都可以帮我解决这个问题。

以下是jsfiddle页面

https://jsfiddle.net/n76epste/10/

Answer 1

所以，当我看，你实际上得到了所有3张图像。您的问题是poster屏幕移动速度超快，永不返回。

bgimg是静态的并由动画师覆盖（你可以通过删除动画师来看到这一点）
animator动画并重复并覆盖bgimage
poster会更新style="left: -***px"，其中*是一个不断增加的数字。（如果您使用css隐藏bgimg和animator，则可以在加载页面时暂时看到此内容）

Answer 2

这是因为Z-index。我更改了海报dev tp的z-index以解决问题。

当2个div在屏幕上移动时，顶部div不可见

2 个答案: