仿苹果Mac Dock任务栏

最新推荐文章于 2026-04-14 12:04:47 发布

原创最新推荐文章于 2026-04-14 12:04:47 发布 · 1.2w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #JavaScript

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了作者如何跟随网上的教程，利用HTML和JavaScript制作了一个仿苹果Mac系统的Dock任务栏。文章中包含完成这个项目的HTML代码示例。

之前看到网上有人做了仿苹果任务栏的，于是跟着也做了一个，下面就是演示图片gif

演示gif

演示图片

下面是完整的HTML代码：

<!--
    作者：shsgear@qq.com
    时间：2016-11-11
    描述：苹果mac dock任务栏
-->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>苹果mac dock任务栏</title>
      <style type="text/css">
           *{
            margin: 0;
            padding: 0;
           }
           body{

           }
           #img_list{
            width: 100%;
            position: absolute;
            bottom: 0px;
            text-align: center;

           }

      </style>
    </head>
    <body>
        <div id="img_list">
            <img src="img/ActivityMonitor.icns_256x256.png" />
            <img src="img/AppZapper.icns_256x256.png"/>
            <img src="img/Chrome.icns_256x256.png"/>
            <img src="img/Numbers.icns_256x256.png" />
            <img src="img/Sigil.icns_256x256.png"/>
            <img src="img/iTunes.icns_256x256.png"/>
            <img src="img/Calendar.icns_256x256.png"/>
            <img src="img/Dashboard.icns_256x256.png"/>
        </div>
             <script type="text/javascript">
                  var oDiv = document.getElementById("img_list");
                  var oImg = oDiv.getElementsByTagName('img');
                  var aWidth = [];
                  window.onload = function(){
                     for (var i=0;i<oImg.length;i++) {                                        //由于手头没有128*128的图片，所以不得不使用256*256
                        aWidth.push(oImg[i].offsetWidth/2);                                   //先把能变到最大的图标的宽度存起来，都是128px
                        oImg[i].width = Math.round(oImg[i].offsetWidth/4);                    //先让网页图标大小等于64px，是最大的一半
                        console.log(oDiv.offsetTop)
                     }
                    document.onmousemove = function(e){
                        var e = e || window.e;

                        for (var i=0;i<oImg.length;i++) {                        //直角三角形     b中由于oImg[i].offsetTop是相对于oDiv的offsetParent，只有2px,减或不减影响不大
                            var a = oImg[i].offsetLeft - e.clientX + oImg[i].offsetWidth/2;   
                            var b = e.clientY  - oDiv.offsetTop - oImg[i].offsetHeight / 2;      
                           // console.log(oImg[0].offsetTop);       
                           // console.log(oDiv.offsetTop)                     //选择合适的被除数，能使鼠标移动过去图标不会变化的太突兀
                            var rate = 1 - Math.sqrt(a*a+b*b) / 300;                 
                            if(rate<0.5) rate = 0.5;                   //让比率大于0.5，就是在128px*比率，但不能减小到比64px还小
                            oImg[i].width = aWidth[i] * rate;
                            //console.log(rate);
                        }


                    }


                  }

             </script>
    </body>
</html>