网站首页 » 前端开发 » JavaScript » 苹果系统菜单动感地缩放效果
上一篇:
下一篇:

苹果系统菜单动感地缩放效果

苹果系统好用是公认的,虽然有很多限制,但还是无法阻止你去用它。这一次要分享的是一个苹果系统底部的菜单效果。

效果演示:http://yunkus.com/demo/apple-macos-menu/

CSS 代码

.menuBox{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}
.menuBox img{
    width: 64px;
    height: 64px;
    cursor: pointer;
}

HTML 代码

<div id="imenuBox" class="menuBox">
    <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>

JavaScript 代码

window.onload = function(){
    iMenuBox = document.getElementById("imenuBox");
    iImg = iMenuBox.getElementsByTagName("img");
    iImgLen = iImg.length;
    document.onmousemove = function(ev){
        var ev = ev || window.event;
        for(var i=0;i<iImgLen;i++){
            // 每张图片中心点
            var rx = iImg[i].offsetLeft + iImg[i].offsetWidth/2;
            var ry = iImg[i].offsetTop + iImg[i].offsetHeight/2 + iMenuBox.offsetTop;

            // 求出勾股定理的a、b 边,求出每张图片中心点与鼠标坐标的距离 c
            var a = ev.clientX-rx;
            var b = ev.clientY-ry;
            var c = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));
            
            // c 大于 300 则控制在 300  
            if(c>300){
                c=300;
            }

            if(c<=300){
                // 通过这个距离求出一个在0-1之间的小数
                var rate = 1 - c/300;

                // 限制最小缩放比例为 0.5 倍
                if(rate<0.5){
                    rate = 0.5;
                }

                // 动态设置各张图片的宽高
                iImg[i].style.width = 128*rate + "px";
                iImg[i].style.height = 128*rate + "px";
            }  
        }
    }
}

为了方便理解 JavaScript 代码中作了一些注释,估计看完注释你应该也明白了这个菜单效果的基本实现套路了。你可以基于这个效果,按照自己的点子来实现其它更炫的效果。

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/apple-macos-menu/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END