原生js制作苹果风格的图标滑入滑出的效果

 要实现的效果是下面这样的，当鼠标滑倒图标上，离鼠标最近的图标放大显示，越远的则变化越小

 html

 <div id="div1">
      <img src="./img/1.png" alt="" srcset="" />
      <img src="./img/2.png" alt="" srcset="" />
      <img src="./img/3.png" alt="" srcset="" />
      <img src="./img/4.png" alt="" srcset="" />
      <img src="./img/5.png" alt="" srcset="" />
    </div>

css 

    #div1 {
        width: 100%;
        position: absolute;
        bottom: 0;
        text-align: center;
      }
      img {
        width: 64px;
      }

js脚本

        var oDiv = document.getElementById("div1");
        var oImg = oDiv.getElementsByTagName("img");
        var oInput = document.getElementsByTagName("input");

        document.onmousemove = function (e) {
          var ev = e || window.event;
          for (var i = 0; i < oImg.length; i++) {
            var x = oImg[i].offsetLeft + oImg[i].offsetWidth / 2;
            var y =
              oImg[i].offsetTop + oImg[i].offsetHeight / 2 + oDiv.offsetTop;

            var b = ev.clientX - x;
            var a = ev.clientY - y;
            var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
            var scale = c / 300;
            scale = 1 - scale;  //为了实现离得近的图标越大
            /* oInput[i].value = 1 - scale; */
            if (scale < 0.5) {
              scale = 0.5;
            } else if (scale > 1) {
              scale = 1;
            }
            oImg[i].style.width = scale * 128 + "px";
          }