如何为元素设置动画以跟随 div 内的鼠标移动？

Question

我正在尝试使用 jQuery 动画使元素在容器 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>

如何为元素设置动画以跟随 div 内的鼠标移动？

How to animate an element to follow mouse movements within a div?

javascript

jquery

jquery-animate