我目前有一张是Clear Lake地图的图像。我想在地图上叠加箭头。我试图使用HTML DOM方法，但是当我运行动画时，它会在页面图像上方创建它。有人对如何使这项工作有任何提示吗？我是否需要移到HTML画布才能使其工作？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Interpolation</title>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: white;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
position: {0,0};
}
</style>
</head>
<body>
<p><button onclick="myMove()">Click Me</button></p>
<div id ="container">
<img id = "myImage" src = "test.img"/>
<div id ="animate">
</div>
</div>
<script>
var id = setInterval(frame, 5);
function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
}
</script>
</body>
</html>
如果要翻阅图像，则必须让动画div“移动”，因此从容器中删除“相对”位置，它将起作用。
这里有一个有效的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Interpolation</title>
<style>
#container {
width: 400px;
height: 400px;
background: white;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
</head>
<body onmousemove="onMove(event);">
<img id = "myImage" src = "https://previews.123rf.com/images/fordzolo/fordzolo1506/fordzolo150600296/41026708-example-white-stamp-text-on-red-backgroud.jpg" width="200"/>
<div id ="container">
<div id ="animate">
</div>
</div>
<script>
const $el = document.getElementById('animate');
function onMove(event) {
$el.style.top = event.clientY + "px";
//$el.style.left = event.clientY + "px";
}
</script>
</body>
</html>