web前端案例-苹果系统菜单（注释超详细）

web前端群，189394454，有视频、源码、学习方法等大量干货分享
image.png

👇html代码：

        <div class="nav"><!--class="自定义的名字" 命名规范(见名知义:用有语义的英文单词)-->
            <img src="images/1.png" width="64"><!--图片标签设置了宽度 高度会等比例自动缩放-->
            <img src="images/2.png" width="64">
            <img src="images/3.png" width="64">
            <img src="images/4.png" width="64">
            <img src="images/5.png" width="64">
        </div>

👇css代码：

        <style>/* css 样式*/
            /*
                第一步:找到对应的标签元素
                第二步:设置相应的属性
            */
            *{/*通用选择器:选择到所有的标签元素*/
                margin:0;/*外边距*/
                padding:0;/*内边距*/
            }
            .nav{/* . class类选择器*/
                position:absolute;/*绝对定位:因为其父元素都没有设置定位属性所以他相对于浏览器窗口来定位了*/
                bottom:0;/*距离参考物下端的距离*/
                width:100%;/*和父元素宽度一样*/
                /*height:100px;高度*
                background:red;*背景颜色*/
                text-align:center;/*文本居中*/
            }
        </style>

👇javascript代码：

        <script>
        //定义一个变量来保存所有的图片标签元素
        //document.getElementsByTagName 在document文档下面通过标签名来获取元素
            var oImg = document.getElementsByTagName("img");
            var oDiv = document.getElementsByClassName("nav")[0];
            //console.log(oImg.length);
            //当鼠标在文档里面移动的时候执行什么功能
            document.onmousemove = function(ev){
                //获取鼠标的坐标值
                var ev = ev || window.event;//做浏览器兼容处理

                for (var i=0;i<oImg.length ; i++)
                {
                    //获取每个图片标签中心点的坐标
                    //offsetTop 获取元素距离有定位属性的父元素的上边的距离
                    var x = oImg[i].offsetLeft + oImg[i].offsetWidth/2;
                    var y = oImg[i].offsetTop + oImg[i].offsetHeight/2+oDiv.offsetTop;
                    //console.log(x +":"+ y);
                    //clientX鼠标距离浏览器窗口可视区域的距离
                    var a = ev.clientX - x;//坐标x之间的距离
                    var b = ev.clientY - y;//坐标y之间的距离

                    //勾股定理计算斜边尺寸
                    //Math.pow  幂函数
                    //Math.pow(a,2)//a的平方
                    //Math.sqrt()开平方
                    var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
                    //计算一个缩放比例
                    var scale = 1 - c/300;
                    //console.log(scale);
                    //控制缩放的范围
                    if(scale < 0.5){
                        scale = 0.5;
                    }
                    oImg[i].width = scale*128;
                }
            }
        </script>