<! DOCTYPE html> <html lang="en" style="width:100%; height:100%;" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <style> * { padding: 0; margin: 0; } #ball { width:12px; height:12px; background: #5EA345; border-radius: 50%; position: fixed; transition: left 1s linear, top 1s ease-in; } </style> < span style="width:100%; height:100%;" > <div id="ball"></div> </body> <script> var $ball = document.getElementById('ball'); document.body.onclick = function (evt) { console.log(evt.pageX,evt.pageY) $ball.style.top = evt.pageY+'px'; $ball.style.left = evt.pageX+'px'; $ball.style.transition = 'left 0s, top 0s'; setTimeout(()=>{ // $ball.style.top = window.innerHeight+'px'; $ball.style.top = '0px'; $ball.style.left = '900px'; $ball.style.transition = 'left 1s linear, top 1s ease-in'; }, 20) } </script> </html>Copy the code

Source link: blog.csdn.net/yhr0322/art…