JS原生實現多個小球跟著滑鼠移動
阿新 • • 發佈：2019-02-13
每個小球移動都有自己的座標，小球移動的同時，需要進行座標傳遞，將第一個座標依次傳遞給最後一個座標，來實現小球跟著移動的效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球運動</title> <style type="text/css"> p { border-radius: 50%; width: 30px; height: 30px; position: absolute; text-align: center; line-height: 30px; color: white; } </style> </head> <body> </body> <script type="text/javascript"> //建立陣列儲存所有的小球 var balls = []; //建立小球函式 function createballs(){ for (var i = 0;i < 60;i++) { var ball = document.createElement("p"); ball.innerHTML = i + 1; ball.style.backgroundColor = randomColor(); //將建立的小球儲存到陣列中 document.body.appendChild( ball); //將所有的小球存在陣列中 balls.push( ball); } } createballs(); //隨機函式 function randomNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } //隨機顏色 function randomColor() { return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")"; } document.onmousemove = function(e){ var eventObj = e || event; for(var i = balls.length - 1;i > 0;i--){ //將小球的下標通過for迴圈進行傳遞 balls[i].style.left = balls[i - 1].style.left; balls[i].style.top= balls[i - 1].style.top; } //將第一個小球賦值為最新的事件物件中的座標 balls[0].style.left = eventObj.clientX + "px"; balls[0].style.top= eventObj.clientY + "px"; } </script> </html>