单击时使用 JavaScript 将 div 动画化为鼠标坐标

Question

我试图让球元素在单击鼠标时向目标移动和收缩。 我创建了一个 function 来抓取鼠标点击目标的坐标，但是我一直在努力处理球 animation。

我考虑过使用关键帧，但我不知道如何在 JavaScript 中使用关键帧。我也尝试过进行转换 - 我知道这不会起作用，但正如您在 move() function 中看到的那样尝试过。

这是我的 javascript/html 文件

 function goal(){ var score = getScore(); increaseDifficulty(score) document.getElementById("score").innerHTML = score + 1; var b = getShotCordinates(); move(b[0],b[1]); } function save(){ resetScore(); } function resetScore(){ document.getElementById("score").innerHTML = 0; } function getScore(){ return parseInt(document.getElementById("score").innerHTML); } function move(x,y){ const fxMove = `translate(${x}px, ${y}px);`; const fxAnim = `transition: transform 0.5s; transform: translate(0, 0);`; document.getElementById("ball").style.transform = translate(x,y); } function getShotCordinates(){ var e = window.event; var Cordinates = [e.clientX, e.clientY]; console.log(Cordinates[0] + " - " + Cordinates[1]) return Cordinates; }

 <BODY> <div id="canvas" class="field"> <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>

以防万一，这是我的画布/用户界面

Answer 1

如果您正在寻找这样的东西：

 const div = document.querySelector("div"); document.addEventListener("click", (e)=>{ console.log(e) div.style.top = e.clientY + "px"; div.style.left = e.clientX + "px"; })

 div{ width:50px; height:50px; background:red; border-radius:50%; position:absolute; transition:.3s; transform:translate(-50%, -50%); }

 <div></div>

只需给球 position 绝对值，然后在每次点击事件中将球的顶部和左侧更改为 javascript。

单击时使用 JavaScript 将 div 动画化为鼠标坐标

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-12-27 14:27:19

单击时使用 JavaScript 将 div 动画化为鼠标坐标

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-12-27 14:27:19

解决方案1
1 已采纳 2022-12-27 14:27:19