欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-24 11:06:44
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用 难点: 计算 html结构: js window.onload = function( ......

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";
            }
        };
    };