Home > Article > Web Front-end > How to use JS to make the ball follow the movement of the mouse

How to use JS to make the ball follow the movement of the mouse

亚连Original: 2018-06-08 15:07:412979browse

This article mainly introduces the animation effect of multiple colored balls following the mouse movement implemented by native JS, involving javascript event response, dynamic modification of page element attributes and random number application and other related operation skills. Friends in need can refer to it

The example in this article describes the animation effect of multiple colored balls that follow the mouse movement implemented in native JS. Share it with everyone for your reference, the details are as follows:

Implementation method:

Each small ball moves has its own coordinates. While moving, coordinates need to be transferred, and the first coordinate is transferred to the last coordinate in order to achieve the effect of the ball moving with it

Implementation code:

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

Operation effect:

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future helpful.

Use native JavaScript to achieve the magnifying glass effect

Detailed analysis of Vue Socket.io source code

Vue component communication (detailed tutorial)

The above is the detailed content of How to use JS to make the ball follow the movement of the mouse. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Install nodejs, npm and cnpm on MacNext article：Install nodejs, npm and cnpm on Mac

See more

How to use JS to make the ball follow the movement of the mouse

Related articles