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

喜欢ヅ旅行 2022-12-21 14:51 168阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyODA0Mw_size_16_color_FFFFFF_t_70_pic_center]

## 步骤 ##

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

## 1.html ##

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

## 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)`});
         })
     })

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyODA0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/46c079d97e7f4fe28f1f7400899cb95b.png