原生js实现苹果菜单效果

水深无声 2022-05-29 12:16 202阅读 0赞

主要用到的知识点

Math.pow(a,b);//a的b次方

Math.sqrt(a);//a的开方

其他的并不难，直接上代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>苹果菜单练习</title>
        <style>
            #box{width:100%; height:auto; position:absolute; bottom:0; text-align:center;}
            #box img{width:64px; height:64px;}
        </style>
    </head>
    <body>
    <div id="box">
        <img src="images/1.png"/>
        <img src="images/2.png"/>
        <img src="images/3.png"/>
        <img src="images/4.png"/>
        <img src="images/5.png"/>
    </div>
    <script>
        var oDiv = document.getElementById('box');
        var aImg = oDiv.getElementsByTagName('img');
        var arr=[];
        for(var i=0; i<aImg.length; i++){
           arr.push([(aImg[i].offsetLeft+1/2*aImg[i].offsetWidth),(1/2*aImg[i].offsetHeight+getTop(aImg[i]))]);
        }//将每个图片的中心点的位置存放在数组中
        document.onmousemove = function(ev){
            var ev = ev||event;
            var L = ev.clientX;
            var T = ev.clientY;
            for(var i=0; i<aImg.length; i++){
                var a  = Math.pow((arr[i][0] - L),2);//鼠标的位置与对应图片的中心点之间水平距离的平方
                var b = Math.pow((arr[i][1] -T),2 );//鼠标位置与对应图片中心点之间垂直距离的平方
                var c = Math.sqrt(b+a);//鼠标到图片中心点的距离
              
                var scare = 1 - c/300;//计算出缩放比例
                if(scare<0.5){
                    scare = 0.5;
                }
                aImg[i].style.width = 128*scare +'px';
                aImg[i].style.height = 128*scare +'px';
            }
    
        }
        function getTop(obj){//获取元素到body顶部的距离
            var iTop = 0;
            while(obj){
                iTop += obj.offsetTop;
                obj = obj.offsetParent;
            }
            return iTop;
        }
    </script>
    </body>
    </html>