原生JS实现的多个彩色小球跟随鼠标移动动画效果示例

2019-11-19 14:26:06

字体：大中小

来源：转载

供稿：网友

本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果。分享给大家供大家参考，具体如下：

实现方法：

每个小球移动都有自己的坐标，小球移动的同时，需要进行坐标传递，将第一个坐标依次传递给最后一个坐标，来实现小球跟着移动的效果

实现代码：

<!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>

运行效果：