【问题标题】：Rotating a moving image with jquery使用 jquery 旋转运动图像
【发布时间】：2022-01-14 22:35:38
【问题描述】：

我遇到了一些问题，导致图像在跟随光标后正确旋转。我认为它是根据它的原始位置旋转的，但我不确定。

有没有机会让它旋转 360 度，而不管它的最终位置如何？

代码：

$(document).mousemove(function(e) {
  /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
  $("#image").stop().animate({
    left: e.pageX,
    top: e.pageY
  }, {
    duration: 5000
  });
});


let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

document.addEventListener("mousemove", e => {
      let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y) )*(180 / Math.PI);
        box.style.transform = `rotate(${angle}deg)`;
      })

.box {
  background-color: black;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 200px;
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="box" id="image"> </div>
</body>

【问题讨论】：

如果我的回答对您有帮助，请务必将其标记为已选答案！

标签： javascript html jquery

【解决方案1】：

编码必知：

在编码时，声明如下变量的工作方式与您想象的不同。

var var1 = 2;
var var2 = var1;

var2 并非始终是 var1 的值，而是将 var2 设置为当前的 var1。

这意味着将var1 设置为3 仍将var2 保持为2。

困惑？检查this post 了解我的意思！（说实话，这让我更加困惑）

这有什么关系？

在以下行中，您执行以下操作：

let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

但是当位置改变时，这些值不会改变。相反，它们保持不变。

你是做什么的？

在这个函数中：

document.addEventListener("mousemove", e => {
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

重新计算边界框，使其如下所示：

document.addEventListener("mousemove", e => {
  boxBoundingRect = box.getBoundingClientRect();
  boxCenter = {
    x: boxBoundingRect.left + boxBoundingRect.width / 2,
    y: boxBoundingRect.top + boxBoundingRect.height / 2
  };
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

片段

$(document).mousemove(function(e) {
  /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
  $("#image").stop().animate({
    left: e.pageX,
    top: e.pageY
  }, {
    duration: 5000
  });
});


let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

document.addEventListener("mousemove", e => {
  boxBoundingRect = box.getBoundingClientRect();
  boxCenter = {
    x: boxBoundingRect.left + boxBoundingRect.width / 2,
    y: boxBoundingRect.top + boxBoundingRect.height / 2
  };
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

.box {
  background-color: black;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 200px;
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="box" id="image"> </div>
</body>

【讨论】：

编码必知：

困惑？检查this post 了解我的意思！ （说实话，这让我更加困惑）

这有什么关系？

你是做什么的？

片段

困惑？检查this post 了解我的意思！（说实话，这让我更加困惑）