How to move a div away from mouse

问题

I'm making a landing page, in which I want my logo to move when followed by a mouse cursor which means I want to move it away from the direction of mouse, but it is just moving randomly and not in a precise way.

It's just a html page and I can use any open source, preferred javascript.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>.container {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        border: 1px #000 solid;
        position: relative;
      }
      .box {
        width: 50px;
        height: 50px;
        border: 1px #000 solid;
        position: absolute;
        right: 200px;
        background: red;
        transition: 0.5s;
      }
      </style>
  </head>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <section class="container">
      <div class="box"></div>
    </section>

    <script type="text/javascript">
  $(document).ready(function(){
    $('.box').hover(function() {
    $(this).box;
    $(this).css('position','absolute').css('top', Math.random()*200 + 'px').css('left', Math.random()*200 + 'px');
    });
    });
</script> 
</body>
</html>

I want it to be followed by the cursor precisely.

回答1:

First use getBoundingClientRect() to get the position of the element (left, top, right and bottom).

Then use mouse coordinates to calculate the closest edge and move the box.

Here is an example of how you would do it. You can configure it according to your needs.

Check the working snippet.

$(document).ready(function(){
  $( ".box-bounds" ).mouseenter(function(e) {
    closestEdge(e, this);
  });  
});

function moveDiv(mouse, edge, elem) {
  const width = $(elem).outerWidth();
  const height = $(elem).outerHeight();
  
  switch (edge) {
    case "left":
      $(elem).css({
      	left: mouse.pageX + 5
      });
      break;
    case "right":
      $(elem).css({
      	left: mouse.pageX - width - 20
      });
      break;
    case "top":
      $(elem).css({
      	top: mouse.pageY + 5
      });
      break;
    case "bottom":
      $(elem).css({
      	top: mouse.pageY - height - 20
      });
      break;
  }
}

function closestEdge(mouse, elem) {
  let elemBounding = elem.getBoundingClientRect();

  let elementLeftEdge = elemBounding.left;
  let elementTopEdge = elemBounding.top;
  let elementRightEdge = elemBounding.right;
  let elementBottomEdge = elemBounding.bottom;

  let mouseX = mouse.pageX;
  let mouseY = mouse.pageY;

  let topEdgeDist = Math.abs(elementTopEdge - mouseY);
  let bottomEdgeDist = Math.abs(elementBottomEdge - mouseY);
  let leftEdgeDist = Math.abs(elementLeftEdge - mouseX);
  let rightEdgeDist = Math.abs(elementRightEdge - mouseX);

  let min = Math.min(topEdgeDist,bottomEdgeDist,leftEdgeDist,rightEdgeDist);

  let position;

  switch (min) {
    case leftEdgeDist:
      position = "left";
      break;
    case rightEdgeDist:
      position = "right";
      break;
    case topEdgeDist:
      position = "top";
      break;
    case bottomEdgeDist:
      position = "bottom";
      break;
  }
  
  moveDiv(mouse, position, elem);
}

.container {
  margin: 0 auto;
  height: 300px;
  width: 100%;
  border: 1px #000 solid;
  position: relative;
}

.box-bounds {
  padding: 10px;
  position: absolute;
}

.box {
  width: 50px;
  height: 50px;
  border: 1px #000 solid;
  right: 200px;
  background: red;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container">
  <div class="box-bounds">
    <div class="box"></div>
  </div>
</section>

来源：https://stackoverflow.com/questions/56439658/how-to-move-a-div-away-from-mouse

标签

javascript

jquery

css