Question

我们将div宽度和高度设置为图像宽度和高度，我们设置div的背景图像。背景图像将在给定坐标处绘制。 div内的图像应该放在背景图像的框中。我们计算了背景图像中的框起始点（使用http://nicodjimenez.github.io/boxLabel/annotate.html），我们相应地设置了div图像的坐标。但是在给定的坐标处没有正确绘制图像。

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

            #board {
                position: absolute;
                background-repeat: no-repeat;
                z-index: 99999;
                background-color: transparent;
            }
        </style>
    </head>
    <body>
        <div id="board">
            <img id="poster" src="//:0">
        </div>

        <script>
            var board = document.getElementById('board');
            var poster = document.getElementById('poster');

            let imgPath = 'url(https://s14.postimg.cc/lyv8mdy9d/billboard3.png)';
            let posterPath = 'url(https://s14.postimg.cc/4yccdq0nl/Iron_Man.jpg';

            var img = new Image();
            img.onload = function() {
                board.style.width = this.width + "px";
                board.style.height = this.height + "px";
                board.style.left = (window.innerWidth - this.width) + "px";
                board.style.top = (window.innerHeight - this.height - 20) + "px";
                board.style.backgroundImage = imgPath;
                poster.style.left = (parseInt(board.style.left) + 13) + 'px';
                poster.style.top = (parseInt(board.style.top) + 38) + 'px';
                poster.style.width = '158px';
                poster.style.height = '73px';
                poster.src = 'https://s14.postimg.cc/4yccdq0nl/Iron_Man.jpg';
            }

            img.src = 'https://s14.postimg.cc/lyv8mdy9d/billboard3.png';
            function moveLeft()
        {   
            board.style.left = board.style.left || 0;

            if(parseInt(board.style.left) <= -(parseInt(board.style.width)))
            {
                board.style.left = (window.innerWidth - parseInt(board.style.width)) + "px";
            }

            board.style.left = parseInt(board.style.left) - 2 + 'px';
            poster.style.left = (parseInt(board.style.left) + 13) + 'px';
            poster.style.top = (parseInt(board.style.top) + 38) + 'px';
            requestAnimationFrame(moveLeft);
        }

        moveLeft();

        </script>
    </body>
</html>

以下是jsfiddle。

https://jsfiddle.net/vyv5p04v/5/

任何人都可以让我知道代码中有任何问题。

下面是截图。

Answer 1

尝试在加载程序中设置poster.style.position = "absolute"或“relative”。默认情况下，定位是静态的。

div中的图像没有被Javascript

1 个答案: