大学生的小乐趣：HTML制作MacOS Dock栏

最新推荐文章于 2023-09-19 13:59:42 发布

我有颗小粒的痣

最新推荐文章于 2023-09-19 13:59:42 发布

阅读量1k

点赞数 4

分类专栏：网页前端文章标签： html css MacOS Web javascript

本文链接：https://blog.csdn.net/weixin_40722661/article/details/114015486

版权

本文介绍了一位大学生如何使用HTML和CSS制作MacOS风格的Dock栏，实现了高斯模糊和图标随鼠标移动大小变化的效果。源代码已上传至GitHub，可应用于Web页面或功能切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大学生的小乐趣：HTML制作MacOS Dock栏

源代码存放在github上：https://github.com/WYKXLDZ/CollegeJoy/tree/master/MacosDock

最终效果：
demo
MacOS的Dock栏动画顺畅，结构优美，本文基于此，搭建了一个简易的dock栏。
有兴趣的同学可以将此部分放在自己的桌面web上，或者将此放在Web应用的功能切换上。

实现细节：

首先第一点就MacOS常见的高斯模糊，此处采用的方法为加入css样式：

background-color: rgba(255,255,255,0.4);
-webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px);

加入这段代码于dock上，将会自动高斯模糊Dock遮盖下的背景图案。

第二点：
鼠标移动过程中，图标跟随鼠标进行大小的变化。其大小分布接近于正态分布，于是构建高斯函数：

gussion:function(x){
   
    return Math.exp(-Math.pow(x,2)/8)
}

当鼠标在Dock中移动时，获取鼠标相对于Dock的水平坐标，然后获取每个图标应该有的大小，并进行样式改变。

__get_size:function(m){
   
        this.coverdom.style.height=(this.icon_size * (this.scale + 1) + this.icon_padding*2) + "px";
        this.coverdom.style.marginTop=-this.icon_size *(this.scale) + "px";
        let left = this.icon_padding;
        this.items.forEach(item => {
   
            item.position = item.dom.offsetLeft + this.dockdom.offsetLeft + .5*(this.icon_size + this.icon_padding*2);
            let scale_computed = Math.floor(this.gussion((item.position-m)/(item.dom.offsetWidth + this.icon_padding*2)) * 100) / 100
            let size = (scale_computed*this.scale + 1)*this.icon_size;
            item.dom.style.width = size + "px";
            item.dom.style.height = size + "px";
            
            item.dom.style.left = left + "px";
            left += size + this.icon_padding*2;
        });
        this.dockdom.style.width=left+"px";
        this.center(m);
    },

源码附上：

// dock.js
const default_option={
   
    icon_size:40,
    icon_padding:5,
    scale:1.5
}

function  MacDock(dockdom,items,option={
   }){
   
    // this.option = option;
    for(let k in default_option)this[k] = default_option[k];
    for(let k in option)this[k] = option[k];

最低0.47元/天解锁文章