Question

我正在制作一个登录页面，在该页面中，我希望我的徽标在跟随鼠标光标时移动，这意味着我希望将其从鼠标的方向移开，但它只是随机移动而并非精确移动方式。

这只是一个html页面，我可以使用任何开源的首选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>

我希望光标紧随其后。

Answer 1

首先使用getBoundingClientRect()获取元素的位置（左，上，右和下）。

然后使用鼠标坐标计算最接近的边并移动框。

这里是您如何执行此操作的示例。您可以根据需要进行配置。

检查工作片段。

$(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>

如何将div从鼠标移开

1 个答案: