鼠标跟随器不动

Question

1. 我将clamp的值设置为0.8和1.2，并写出了整个代码。
2. 但是写完之后我只想将钳位值更改为 0.8 和 1.4。鼠标奇怪地停止移动了。
3. 我恢复了 0.8 和 1.2 的值，即使恢复了初始值，鼠标跟随器也没有移动。

我原以为它会明显移动。

function circleChapta() {
  var timeout
  var xscale = 1
  var yscale = 1
  var xprev = 0
  var yprev = 0

  window.addEventListener("mousemove", function(dets) {
    clearTimeout(timeout);
    var xdiff = dets.clientX - xprev
    var ydiff = dets.clientY - yprev
    xprev = dets.clientX
    yprev = dets.clientY
    xscale = gsap.utils.clamp(0.8, 1.2, xdiff)
    yscale = gsap.utils.clamp(0.8, 1.2, ydiff)

    MouseFollower(xscale, yscale)

    timeout = this.setTimeout(function() {
      document.querySelector("#circleScroll").style.transform = `translate(${dets.clientX}px, ${dets.clientY}px scale(1, 1))`;
    }, 100)
  })
}
circleChapta();


function MouseFollower(xscale, yscale) {
  window.addEventListener("mousemove", function(dets) {
    document.querySelector("#circleScroll").style.transform = `translate(${dets.clientX}px, ${dets.clientY}px scale(${xscale}, ${yscale}))`;
  })
}

Answer 1

MouseFollower

正在为每次调用时的鼠标移动创建另一个事件监听器，即每次鼠标移动时，而不是在其内部的圆圈上执行平移。

删除了里面的addEventListener：

function MouseFollower(xscale, yscale) {
    document.querySelector("#circleScroll").style.transform = `translate(${dets.clientX}px, ${dets.clientY}px scale(${xscale}, ${yscale}))`;
}