div中的圖像未在Javascript設置的坐標處繪制

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 個解決方案

解決方案1
1 已采納 2018-04-19 03:09:44

div中的圖像未在Javascript設置的坐標處繪制

問題描述

1 個解決方案

解決方案1 1 已采納 2018-04-19 03:09:44

解決方案1
1 已采納 2018-04-19 03:09:44