Heim > Artikel > Web-Frontend > JS-Implementierung mehrerer farbiger Bälle nach dem Beispielcode für Mausbewegungen

JS-Implementierung mehrerer farbiger Bälle nach dem Beispielcode für Mausbewegungen

小云云Original: 2018-02-02 10:08:561713Durchsuche

Dieser Artikel teilt Ihnen hauptsächlich den JS-Beispielcode zur Implementierung mehrerer farbiger Bälle mit, um der Bewegung der Maus zu folgen. Wenn sich der Ball bewegt, müssen die Koordinaten übertragen werden zuerst Die Koordinaten werden der Reihe nach an die letzte Koordinate übergeben, um den Effekt zu erzielen, dass sich der Ball mitbewegt.

Implementierungscode:

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

Betriebseffekt:

Verwandte Empfehlungen:

jQuery implementiert Bilder, um der Bewegung der Maus zu folgen

Erläuterung der Methode zur Verwendung von jQuery zur Implementierung von Divs, um der Bewegung der Maus zu folgen

Ausführliches Beispiel für die Verwendung von JS zum Implementieren von Blasen, die der Mausbewegungsanimation für Spezialeffekte folgen

Das obige ist der detaillierte Inhalt vonJS-Implementierung mehrerer farbiger Bälle nach dem Beispielcode für Mausbewegungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

jquery JS

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Was ist NW.js und wie wird es verwendet?Nächster Artikel：Was ist NW.js und wie wird es verwendet?

In Verbindung stehende Artikel

Mehr sehen