苹果菜单移入线性放大效果【使用勾股定理】

效果图

原理分析

添加移入事件，获取当前鼠标的clientX,clientY
获取每个div块的x1,y1。x1 = this.offsetLeft + this.offsetWidth / 2得到中心点，y1 = this.offsetHeight/ 2 + 父级的offsetTop
计算出x3,y3的信息，计算方式为x3 = (x2- x1) ; y3 = (y2 - y1),最后通过勾股定理算出斜边
a平方+b平方= c平方,得到 C
算出系数（注意此时中心点的系数最小，需要取反）

参考代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            height:100vh;
        }
        .box{
            position: absolute;
            bottom: 20px;
            left:0;
            right: 0;
            text-align: center;
        }
        ul>li{
            list-style-type: none;
        }
        .box>ul{
            display: inline-block;
            border:1px solid red;
        }
        .box>ul>li{
            display: inline-block;
        }
        .box>ul>li:not(:last-child){
            margin-right: 10px;
        }
        .box img{
            display: inline-block;
            width: 80px;
            cursor: pointer;
            /* transition: all .8s; */
        }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>
          <img src="../1.jpg" />
        </li>
        <li>
          <img src="../1.jpg" />
        </li>
        <li>
          <img src="../1.jpg" />
        </li>
        <li>
          <img src="../1.jpg" />
        </li>
        <li>
          <img src="../1.jpg" />
        </li>
        <li>
          <img src="../1.jpg" />
        </li>
      </ul>
    </div>
  </body>
</html>
<script>
      var oUl = document.querySelector("ul");
      var oLis = oUl.querySelectorAll("li");
      var oDiv = document.querySelector('.box');
      for(let i=0,length= oLis.length;i<length;i++){
            oLis[i].left = oLis[i].offsetLeft + oLis[i].offsetWidth / 2;
            oLis[i].top = oLis[i].offsetTop + oDiv.offsetTop;
           
      }
      document.onmousemove = function(e){
            var ev = e || ev;
            var clientX = ev.clientX;
            var clientY = ev.clientY;

            //算接斜边
            for(let i=0,length= oLis.length;i<length;i++){
                  let skewX = oLis[i].left - clientX;
                  let skewY = oLis[i].top - clientY;
                  let skewZ = Math.sqrt(Math.pow(skewX,2) + Math.pow(skewY,2));
                
                  let rate = 1- skewZ / 600;
                  if(rate <0.6){
                     rate = 0.6;
                  }
                  oLis[i].children[0].style.transform ="scale("+ (80*rate) / 80 + ")";
               
            }
      }
</script>