原生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";

            }

        };

    };

巴特西

原生JS通过勾股定理计算苹果菜单效果

JS原生苹果菜单效果

最新文章

热门文章