如何理解JavaScript用三角函數計算鼠標與多個目標點的距離

時間 2019-12-09

標籤如何理解 javascript 三角函數計算鼠標多個目標距離欄目 JavaScript 简体版

原文原文鏈接

這個東西理解起來可能有點抽象，下面會用代碼和圖片的方式幫助你們去更方便的理解。javascript

上圖是我畫的基本構思圖css

下面是html結構html

<style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                width: 1200px;
                height: 300px;
                position: absolute;
                left: 100px;
                bottom: 0;
                text-align: center;
                border: #000000 5px solid;
            }

            .bg {
                width: 600px;
                height: 420px;
                background-image: url(../image/0522/gg.png);
                background-size: 600px 420px;
                border: 1px solid #000000;
            }

            img {
                width: 64px;
            }
        </style>

<body>
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <br>
        <div class="bg">

        </div>
        <div id="div1">
            <img src="../image/0522/1.png">
            <img src="../image/0522/2.png">
            <img src="../image/0522/3.png">
            <img src="../image/0522/4.png">
            <img src="../image/0522/5.png">
        </div>
    </body>

下面是js代碼java

<script type="text/javascript">
        // 利用的是勾股定理
        var inputs = document.getElementsByTagName('input');
        var oDiv = document.getElementById('div1');
        var imgs = oDiv.getElementsByTagName('img');
        document.onmousemove = function(event) {
            var env = event || window.event;
            for (var i = 0; i < imgs.length; i++) {
                // 算出中心點的座標
                //元素到屏幕的距離+元素自身寬度的一半就能夠得到中心點
                let x = imgs[i].offsetLeft + imgs[i].offsetWidth / 2;
                //offsetTop只能拿到圖片從底部到本身的距離還要加上div1的距離
                let y = imgs[i].offsetTop + imgs[i].offsetHeight / 2 + oDiv.offsetTop;
                var b = env.clientX - x;
                var a = env.clientY - y;
                console.log(b, x, a, y)
                var c = Math.sqrt(Math.pow(b, 2) + Math.pow(a, 2)) // 勾股定理 經過a邊b邊求c邊的距離
                // sscale 表示放大比例 
                var scale = 1 - c / 300;
                if (scale < 0.5) {
                    scale = 0.5;
                }

                inputs[i].value = scale;
                /* 把設置好的縮放比例賦值給圖片 */
                imgs[i].style.width = scale * 128 + "px";
                imgs[i].style.height = scale * 128 + "px";

            }
        }
    </script>

上面的代碼就是利用勾股定理計算鼠標和斜邊的距離來得到不一樣位置和鼠標的距離url