将 div 重置为原来的 position
[英]Reset div to its original position
问题描述
I am trying to reset an element to its original position. The ball div is positions at the kick line and then when shot, moves towards the mouse click, however it does not rest back to its position after the shot has been taken.
我正在尝试将一个元素重置为其原始 position。球 div 位于踢球线上，然后在射门时向鼠标单击方向移动，但在射门后它不会 rest 回到其 position。
I am using the getBoundingClientRect to get the original postion when the JS file is loaded and then created a JS method called restoreBallPosition() which sets the top and left of the ball div back to the saved ballRect positions after a timeout but its not working and I am struggling to understand why.我正在使用 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>
1 个解决方案
解决方案1
1 已采纳 2022-12-28 07:55:51
Using transform instead position-top worked for me.使用transform而不是position-top对我有用。
The updated **restoreBallPosition** function will looks something like this:更新后的**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);
}
Attached is a minimal reproducible example.附件是一个最小的可重现示例。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.