将 div 重置为原来的 position

Question

我正在尝试将一个元素重置为其原始 position。球 div 位于踢球线上，然后在射门时向鼠标单击方向移动，但在射门后它不会 rest 回到其 position。

我正在使用 getBoundingClientRect 在加载 JS 文件时获取原始位置，然后创建一个名为 restoreBallPosition() 的 JS 方法，该方法在超时后将球 div 的顶部和左侧设置回保存的 ballRect 位置，但它不起作用并且我很难理解为什么。

 const ball = document.getElementById('ball'); const ballRect = ball.getBoundingClientRect(); console.log(ballRect); function goal() { var score = getScore(); increaseDifficulty(score) document.getElementById("score").innerHTML = score + 1; var b = getShotCordinates(); moveBall(b[0], b[1]); restoreBallPositions(); } function save() { resetScore(); resetDifficulty(); restoreBallPositions(); } function resetScore() { document.getElementById("score").innerHTML = 0; } function getScore() { return parseInt(document.getElementById("score").innerHTML); } function increaseDifficulty(score) { switch (score) { case 5: document.getElementById("goalkeeper").style.animation = "protect 8s infinite"; break; case 10: document.getElementById("goalkeeper").style.animation = "protect 6s infinite"; break; case 15: document.getElementById("goalkeeper").style.animation = "protect 4s infinite"; break; case 20: document.getElementById("goalkeeper").style.animation = "protect 3s infinite"; break; case 25: document.getElementById("goalkeeper").style.animation = "protect 2s infinite"; break; case 30: document.getElementById("goalkeeper").style.animation = "protect 1s infinite"; break; default: } } function resetDifficulty() { document.getElementById("goalkeeper").style.animation = "protect 10s infinite"; } function moveBall(x, y) { var x = x - 150; var y = y - 450; document.getElementById("ball").style.transform = "translate(" + x + "px," + y + "px)"; document.getElementById("ball").style.transition = "0.2s"; } function getShotCordinates() { var e = window.event; var Cordinates = [e.clientX, e.clientY]; console.log(Cordinates[0] + " - " + Cordinates[1]) return Cordinates; } function restoreBallPositions() { setTimeout(function() { ball.style.top = ballRect.y; ball.style.top = ballRect.x; }, 2000); }

 <HTML lang="en"> <HEAD> <title>Soccor Game</title> <link rel='stylesheet' href='css/styles.css'> </HEAD> <BODY> <div id="canvas" class="field" onload="savePositions()"> <div id="goals" class="goals" onclick="goal()"> </div> <div id="goalkeeper" onclick="save()"> </div> <div id="kick-off"> <div id="ball" class="ball"> </div> </div> <div id="score-container"> <div id="counter"> <h1 class="counter-text">Score</h1> <h1 class="counter-score" id="score">0</h1> </div> </div> </div> <script src='js/script.js'></script> </BODY> </html>

Answer 1

使用transform而不是position-top对我有用。

更新后的**restoreBallPosition** function 看起来像这样：

function restoreBallPositions() {
console.log('restoring')
  setTimeout(function() {
    console.log('restore timeout', ballRect);
ball.style.transform = "translate(" + ballRect.x + "px," + ballRect.y + "px)";
    ball.style.transition = "0.2s";
  }, 2000);
}

附件是一个最小的可重现示例。

 const ball = document.querySelector('.ball'); const ballRect = ball.getBoundingClientRect(); console.log(ballRect); function getShotCordinates(){ var e = window.event; var Cordinates = [e.clientX, e.clientY]; console.log(Cordinates[0] + " - " + Cordinates[1]) return Cordinates; } function restoreBallPositions() { console.log('restoring') setTimeout(function() { console.log('restore timeout', ballRect); ball.style.transform = "translate(" + ballRect.x + "px," + ballRect.y + "px)"; ball.style.transition = "0.2s"; }, 2000); } function moveBall() { const [a, b] = getShotCordinates(); var x = a - 150; var y = b - 450; document.querySelector(".ball").style.transform = "translate(" + a + "px," + b + "px)"; document.querySelector(".ball").style.transition = "0.2s"; restoreBallPositions() } window.addEventListener('click', moveBall);

 .ball { background: red; height: 50px; width: 50px; border-radius: 50%; position: absolute; top: 20%; left: 10%; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="ball"> </div> </body> </html>

将 div 重置为原来的 position

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-28 07:55:51

将 div 重置为原来的 position

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-28 07:55:51

解决方案1
1 已采纳 2022-12-28 07:55:51