原生js实现苹果菜单效果

最新推荐文章于 2021-05-27 12:24:17 发布

冰雪为融

最新推荐文章于 2021-05-27 12:24:17 发布

阅读量1k

点赞数

分类专栏： js练习文章标签： js

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79669200

版权

js练习专栏收录该内容

19 篇文章 3 订阅

订阅专栏

主要用到的知识点

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>

冰雪为融

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js实现苹果菜单效果

主要用到的知识点Math.pow(a,b);//a的b次方Math.sqrt(a);//a的开方其他的并不难，直接上代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;苹果菜单练习&lt;/title&gt;
复制链接

扫一扫