原生js 实现 鼠标移动跟随的案例

原生js实现的鼠标滑过图标效果，实现起来比较简单，重点就是计算角度弧度来求出left,top的值，看效果

最终效果

业务逻辑分析

重点是根据鼠标移动的距离利用三角函数正切算出角度，然后再利用sin,cos计算目标对象的x,y距离

js

 <script>
      //   /**
      //    * 弧度转角度 弧度 * 180 / Math.PI
      //    * Math.sin((num * Math.PI) / 180) = a / r
      //    *
      //    * /
      let oDiv2 = document.getElementById('div2')
      let oDiv3 = document.getElementById('div3')
      let r = 3
      let l2 = 115,
        l3 = 135,
        t2 = 45,
        t3 = 45

      document.onmousemove = function (ev) {
        let e = ev || window.event
        change(oDiv2, e.clientX, e.clientY, l2, t2)
        change(oDiv3, e.clientX, e.clientY, l3, t3)
        function change(obj, x, y, l, t) {
          let a = Math.abs(x - (obj.offsetLeft + obj.parentNode.offsetLeft))
          let b = Math.abs(y - (obj.offsetTop + obj.parentNode.offsetTop))
          let changeX = 0,
            changeY = 0
          if (
            x > obj.offsetLeft + obj.parentNode.offsetLeft &&
            y < obj.offsetTop + obj.parentNode.offsetTop
          ) {
            changeX = Math.sin(Math.atan(b / a)) * r
            changeY = Math.cos(Math.atan(b / a)) * -r
          } else if (
            //右下
            x > obj.offsetLeft + obj.parentNode.offsetLeft &&
            y > obj.offsetTop + obj.parentNode.offsetTop
          ) {
            //改变的x,y距离
            changeX = Math.sin(Math.atan(b / a)) * r
            changeY = Math.cos(Math.atan(b / a)) * r
          } else if (
            x < obj.offsetLeft + obj.parentNode.offsetLeft &&
            y > obj.offsetTop + obj.parentNode.offsetTop
          ) {
            //改变的x,y距离
            changeX = Math.sin(Math.atan(b / a)) * -r
            changeY = Math.cos(Math.atan(b / a)) * r
          } else if (
            x < obj.offsetLeft + obj.parentNode.offsetLeft &&
            y < obj.offsetTop + obj.parentNode.offsetTop
          ) {
            changeX = Math.sin(Math.atan(b / a)) * -r
            changeY = Math.cos(Math.atan(b / a)) * -r
          }

          obj.style.left = l + changeX + 'px'
          obj.style.top = t + changeY + 'px'
        }
      }
    </script>

html

 <div id="div1">
      <div id="div2" class="eye"></div>
      <div id="div3" class="eye"></div>
    </div>

css

* {
        padding: 0;
        margin: 0;
      }
      #div1 {
        width: 176px;
        height: 91px;
        background: url(./images/265.png) no-repeat;
        position: relative;
        left: 300px;
        top: 200px;
      }
      .eye {
        border: 2px solid #000;
        position: absolute;
        /* transition: 0.3s; */
      }
      .eye:nth-of-type(1) {
        left: 115px;
        top: 45px;
      }
      .eye:nth-of-type(2) {
        left: 135px;
        top: 45px;
      }