Как переместить несколько элементов при перемещении мыши - PullRequest
Новая
       7

Как переместить несколько элементов при перемещении мыши

0 голосов
/ 01 июня 2018

Как я могу использовать Javascript , чтобы выбрать несколько элементов и переместить их одновременно?Я пытаюсь сделать что-то подобное без использования jQuery: https://jenniferdewalt.com/caterpillar.html

// JavaScript source code
var container = document.getElementById("container");
//MAKE NEW DIV
//container.innerHTML = '<div id="circle" class="circle"></div>';
console.log(container.innerHTML);
var mouseX = 0;
var mouseY = 0;
var positionX = 0;
var positionY = 0;
var speed = 50;
var i;
var m = 0;

var newCircle;

//EVENTS / TRIGGERS
window.addEventListener("mousemove", mouseCoords);
setInterval(circlePosition, 30);

//Make Circles
makeCircles(20);

function makeCircles(num) {
  for (i = 0; i < num; i++) {
    container.innerHTML += '<div id="circle' + i + '" class="circle"></div> ';
    //Circle with NEW ID
    var newCircle = document.getElementById("circle" + i);
    //This Circle Random Color;
    var ranColor = genColor();
    newCircle.style.backgroundColor = ranColor;
    //This Circle Random Size;
    var newSize = genSize();

    newCircle.style.width = newSize + "px";
    newCircle.style.height = newSize + "px";
  }
}

console.log(container.innerHTML);

//FUNCTIONS.
//MOUSE COORDS
function mouseCoords(e) {
  mouseX = e.clientX;
  mouseY = e.clientY;
}

//CIRCLEPOSITION
function circlePosition() {
  //Circle go's to Last Mouse position
  var circleX = document.getElementById("circle0");
  var circleY = document.getElementById("circle0");

  positionX += (mouseX - positionX) / speed;
  positionY += (mouseY - positionY) / speed;
  circleX.style.left = positionX + "px";
  circleY.style.top = positionY + "px";
}


// MOST IMPORTANT PART RELATED TO QUESTION

//Random Color
function genColor() {
  var RGBarr = [];
  for (c = 0; c < 3; c++) {
    var newNum = Math.floor(Math.random() * 256);
    RGBarr.push(newNum);
  }
  var newRGB = 'rgb(' + RGBarr[0] + ',' + RGBarr[1] + ',' + RGBarr[2] + ')';

  return newRGB;
}

//Random Size
function genSize() {
  var ranSize = Math.floor(Math.random() * 100) + 1;
  return ranSize;
}
body {
  background-color: black;
}

.circle {
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <link href="./HOWTOMOVEAFUCKINGCIRCLE.css" type="text/css" rel="stylesheet" />
  <meta charset="utf-8" />
  <title></title>
</head>

<body>

  <div id="container"></div>
  <!--Javscript-->
  <script src="./HOWTOMOVEAFUCKINGCIRCLE.js"></script>
</body>

</html>

Я самоучка, поэтому буду очень признательна за вашу помощь, если вас не попросят помочь мне в этом проекте, рассмотрите возможность датьЯ еще один пример, как я могу перемещать несколько элементов одновременно.Привет из Нидерландов.

...