js获取两点间的角度(指针跟随鼠标旋转动画)

js获取两点间的角度,让指针跟随鼠标绕中心点旋转

怎么让指针跟随鼠标绕中心点旋转呢?看上去好看很难，仔细一想，如果获取到两点间的角度，那么问题就很简单了。

步骤

1.获取中心点坐标
2.获取鼠标坐标位置
3.使用Math.atan2获取两点间 ,Math.atan2返回作为(x，y)点和x轴角度的数值,然后计算得到角度

1.html

部分代码如下（示例）：
代码如下（示例）：

<div class="big_clock">
  <img src="./clock/a03.png" alt="" class="indicating_01">
  <img src="./clock/a03.png" alt="" class="indicating_02">
  <img src=".//clock/a03.png"alt="" class="indicating_03">
  <div class="indicating_04" id="indicating_04">
      <img src=".//clock/a04.png" alt="" style=" width: 106px;height: 167px;" class="indicating_img">
   </div>
</div>

2.css

部分代码如下（示例）：

.big_clock {
  position: relative;
  width: 618px;
  height: 613px;
  background: url("../img/clock/a02.png") center center no-repeat;
  background-size: cover;
}
.indicating_01,
.indicating_02,
.indicating_03 {
  width: 10px;
  height: 29px;
  position: absolute;
  transform-origin: bottom;
}

3.js

部分代码如下（示例）：

 $(document).ready(function () {
	 const indicating_img = $(".indicating_04");
     const img = $(".indicating_04");
     $('.big_clock').mousemove(event => {
        let rect = document.getElementById("indicating_04").getBoundingClientRect();
        //中心位置
        center = {
            x: rect.left + (rect.right - rect.left) / 2,
            y: rect.top + (rect.bottom - rect.top) / 2
         }
         const x = indicating_img.offset().left + indicating_img.width() / 2;
         const y = indicating_img.offset().top + indicating_img.height() / 2;
         const rad = Math.atan2(center.y - event.pageY, center.x - event.pageX);
        let deg = rad / (Math.PI / 180) + 60
        img.css({transform: `rotate(${deg}deg)`});
     })
 })

如果对您有帮助，点个赞吧~~~~ 有问题欢迎留言哦