JS实现多个彩色小球跟随鼠标移动代码
JS实现多个彩色小球跟随鼠标移动代码,实现方法:每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果。
演示链接:http://gebijiadexiaoliu.cn:8080/Company/xiaoqiou.jsp
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球运动</title> border-radius: 50%; <style type="text/css"> p { position: absolute; width: 30px; height: 30px; color: white; text-align: center; line-height: 30px; <script type="text/javascript"> } </style> </head> </body> <body> for (var i = 0;i < 60;i++) { //创建数组存储所有的小球 var balls = []; //创建小球函数 function createballs(){ ball.style.backgroundColor = randomColor(); var ball = document.createElement("p"); ball.innerHTML = i + 1; createballs(); //将创建的小球存储到数组中 document.body.appendChild( ball); //将所有的小球存在数组中 //随机函数 balls.push( ball); } } return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")"; function randomNum(m, n) { return Math.floor(Math.random() * (n - m + 1) + m); } //随机颜色 function randomColor() { } //将小球的下标通过for循环进行传递 document.> var eventObj = e || event; for(var i = balls.length - 1;i > 0;i--){ balls[0].style.left = eventObj.clientX + "px"; balls[i].style.left = balls[i - 1].style.left; balls[i].style.top= balls[i - 1].style.top; </html> } //将第一个小球赋值为最新的事件对象中的坐标 balls[0].style.top= eventObj.clientY + "px"; } </script>
- 打赏
请选择打赏方式
- 微信
- 支付宝