javascript - 如何在 div 中为元素设置动画以跟随鼠标移动？

Question

我正在尝试使用 jQuery animate 创建一个元素，以在容器 div 的约束内跟随鼠标移动。当鼠标移动时，元素将变为具有与其当前位置相匹配的绝对定位，然后向鼠标的位置移动，但在 div 内。

不过，我似乎无法正确地垂直定位:元素总是高于容器，有时它会向与应有方向相反的方向移动(即，鼠标向下移动，元素向上移动) )。我在水平定位方面没有遇到任何问题。

代码如下:

var executed = false;
var dronePos = $("#drone").offset().top;

$("body").mousemove(function(event) {

    var x;
    var y;

    //Vertical positioning: If the mouse position is greater than or equal to the left offset of the drone container, and less than or equal to the left offset of the drone container plus the width (if it falls within the drone container)

    if (event.pageX >= $("#droneContainer").offset().left && event.pageX <= $("#droneContainer").offset().left + $("#droneContainer").width()){
        x = event.pageX;

    } else { //if it's to the left
        if (event.pageX < $("#droneContainer").offset().left){
            x = $("#droneContainer").offset().left; 
        }
        else { //if it's to the right
            x = $("#droneContainer").offset().left + $("#droneContainer").width();
        }
    }   

    //Horizontal positioning: If the mouse position is greater than or equal to the to offset of the drone container, and less than or equal to the top offset of the drone container plus the height (if it falls within the drone container)

    if (event.pageY >= $("#droneContainer").offset().top && event.pageY <= $("#droneContainer").offset().top + $("#droneContainer").height()){
        y = event.pageY - dronePos;
    } else { //if it's above
        if (event.pageY < $("#droneContainer").offset().top){
            y = $("#droneContainer").offset().top - dronePos;   
        } else { //if it's below
            y = ($("#droneContainer").offset().top + $("#droneContainer").height()) - dronePos;
        }
    }

    if (executed == false){
        executed = true;
        var position = $("#drone").position();
        $("#drone").css({top: position.top, left: position.left, position:"absolute"}); 
    }

    $("#drone").stop().animate({
        left: x, 
        top: y
    }, 800, "swing");

    dronePos = $("#drone").offset().top;

});

非常感谢任何帮助! 🙏

Answer 1

很难判断代码示例中真正出了什么问题，因此我尝试制作一个更轻的版本，希望它能够完成您自己的脚本应该做的事情。

另外，我认为，不要使用 jQuery animate。 CSS 确实变得非常强大，可以为您完成定位和转换方面的大量繁重工作。

希望这对您有所帮助。如果您有任何疑问，请告诉我。

var $container = $('.container');
var $drone = $('.drone');
var droneCenter = {
  x: $drone.width() / 2,
  y: $drone.height() / 2
};

$container.on('mousemove', function(event) {
  $drone.css('transform', `translate3d(${event.offsetX - droneCenter.x}px, ${event.offsetY - droneCenter.y}px, 0)`);
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  align-items: safe center;
  justify-content: safe center;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  max-width: 1000px;
  max-height: 1000px;
  padding: 15px;
}

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
}

.drone {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 25px;
  background-color: red;
  border-radius: 50%;
  transition: transform 800ms ease-out;
  will-change: transform;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="container">
    <div class="drone"></div>
  </div>
</div>