原生JS經過勾股定理計算蘋果菜單效果

JS原生蘋果菜單效果

知識點：
勾股定理 a²+b²=c²

Event 是一個事件對象，當一個事件發生後，和當前事件發生相關的詳細信息會被臨時存儲到一個指定的地方，也就是event對象，以方便咱們在須要的時候調用

難點：
計算

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

html結構:

<input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">

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

window.onload = function() {
        var input = document.getElementsByTagName('input');
        var oBox = document.getElementById('box');
        var oImg = oBox.children;
        // console.log(oImg);
        document.onmousemove = function(even) {
            var even = even || window.event;
            var x;
            var y;
            for (var i = 0; i < oImg.length; i++) {
                //獲取圖片的中心點
                x = oImg[i].offsetLeft + oImg[i].offsetWidth / 2;
                y = oImg[i].offsetTop + oBox.offsetTop + oImg[i].offsetHeight / 2;

                //鼠標在瀏覽器座標的x軸距圖片x中心點距離
                var a = even.clientX - x;
                //鼠標在瀏覽器座標的y軸距圖片y中心點距離
                var b = even.clientY - y;

                //勾股定理a²+b²=c²
                var c = Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2))

                //scale 表示放大比例 
                var scale = 1 - c / 300;

                if (scale < 0.5) {
                    scale = 0.5;
                }

                //每張圖片的c賦值到input中，方便查看數據變化
                input[i].value = scale;


                oImg[i].style.width = scale * 100 + "px";
                oImg[i].style.height = scale * 100 + "px";
            }
        };
    };