JavaScript仿鼠标移过macOS Dock效果【内附项目地址】

Android写了、iOS写了、Java后端写了，接下来因为工作需要，得踩坑web前端了，所以趁这两天先学习学习，入个门。
正好看到腾讯课堂《Web前端零基础原生Js+H5/Css3移动开发+框架全栈高级应用【猿说】》的一节课，用JavaScript实现macOS Dock的效果，挺有意思。
展示效果以及项目结构跟老师讲的略微有些不一样，先上效果图
真正的macOS上的效果
macOS
我们自己写的web上的效果
show
老师说过的原理我就不重复了（大概就是一个勾股定理判断鼠标位置），但是她没有给Dock加上背景，所以我这边加一个背景，这样会显得更加专业是不是？嘿嘿嘿。。。毕竟处女座的蓝孩纸，比较在意细节以及有点强迫症。。。
鼠标在移到应用上的时候，Dock的背景是只会变宽不会变高的，所以如果把放icon的div设置背景的话，图标变大时可以看到div也变高了。所以我采用两层div，一层在下面作为背景，一层div背景为透明，高度设置auto并随着icon的变化而变化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>macOS Dock</title>

    <link rel="stylesheet" type="text/html" href="/css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="Desktop1.css"/>
    <script src="../js/vendor/jquery-3.3.1.js"></script>
    <script src="../js/Desktop/Desktop.js"></script>

</head>
<body>

<div id="Dock">
    <div id="Icons">
        <img class="icon" src="../img/Finder.png"/>
        <img class="icon" src="../img/Launchpad.png"/>
        <img class="icon" src="../img/AppStore.png"/>
        <img class="icon" src="../img/Siri.png"/>
        <img class="icon" src="../img/Safari.png"/>
        <img class="icon" src="../img/Xcode.png"/>
        <img class="icon" src="../img/idea.png"/>
        <img class="icon" src="../img/Trashempty.png"/>
    </div>
    <div id="bg"></div>
</div>

</body>
</html>

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    overflow-x: hidden;
    overflow-y: hidden;
    background: url("../img/Yosemite.png") no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.icon {
    width: 70px;
    height: 70px;
    margin-left: 5px;
}

#Dock {
    position: absolute;
    /*position: fixed;*/
    width: 100%;
    height: auto;
    bottom: 0;
}

#Dock div{

}

#bg{
    width: 600px;
    height: 80px;
    bottom: 0;
    position: relative;
    margin: 0 auto;
    z-index: 10;
    background-color:rgba(255,255,255,0.15);
}

#Icons{
    font-size:0;
    width: 100%;
    height: auto;
    bottom: 5px;
    position: absolute;
    z-index: 15;
    text-align: center;
}

CSS设置icon的初始大小，和两个层叠div的位置，刚开始学，对于position和margin: 0 auto有点糊涂，自己写两个div填充上背景色，多试试就知道了。
JavaScript代码就是做一个勾股定理的运算，以及对icon的一个缩小放大比例，具体原理可以去腾讯课堂看视频。

$(function () {
    var icons = document.getElementsByTagName("img");
    var dock = document.getElementById("Dock");
    document.onmousemove = function (ev) {
        // || event 兼容IE event 名称
        var e = ev || event;

        for (var i = 0; i < icons.length; i++) {
            var x = icons[i].offsetLeft + icons[i].offsetWidth / 2;
            var y = icons[i].offsetTop + icons[i].offsetHeight / 2 + dock.offsetTop;
            var a = ev.clientX - x;
            var b = ev.clientY - y;
            var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2));
            var scale = 1 - c / 300;
            if (scale < 0.5) {
                scale = 0.5;
            }
            icons[i].style.width = scale * 140 + "px";
            icons[i].style.height = scale * 140 + "px";
        }
    };
});

WARNING：我这个是写着玩的，所以Yosemite背景图片有20多M，你们出去千万不要这样干啊。。。

写在最后
项目地址：https://gitee.com/ichampion/macOS-Dock.git

JavaScript仿鼠标移过macOS Dock效果【内附项目地址】

猜你喜欢