我们将 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/
任何人都可以让我知道代码中有任何问题。
下面是截图。
最佳答案
尝试在负载处理程序中设置 poster.style.position = "absolute" 或 "relative"。默认定位是静态的。
关于javascript - div 中的图像未在 Javascript 设置的坐标处绘制，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49912062/