这个是苹果机上的 Dock 效果，Windows 上也有一款专门的模拟软件——RocketDock。

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>RocketDock效果</title>

<style>

/* CSS Reset */

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {margin:0; padding:0;}

body,button,input,select,textarea {font:12px/1.5 \5FAE\8F6F\96C5\9ED1,\5B8B\4F53,Arial,Helvetica,sans-serif;}

h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:normal;}

table {border-collapse:collapse; border-spacing:0;}

em {font-style:normal;}

ul,ol {list-style:none;}

a {text-decoration:none; color:#39442e;}

a:hover {text-decoration:underline;}

fieldset,img {border:0;}

button,input,select,textarea {font-size:100%; border:0;}

.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}

.clearfix {*zoom:1;}

.menu {position:absolute; width:100%; bottom:0; text-align:center;}

</style>

</head>

<body>

<div id="menu" class="menu">

    <img src="data:images/1.png" alt="" />

    <img src="data:images/2.png" alt="" />

    <img src="data:images/3.png" alt="" />

    <img src="data:images/4.png" alt="" />

    <img src="data:images/5.png" alt="" />

    <img src="data:images/6.png" alt="" />

    <img src="data:images/7.png" alt="" />

    <img src="data:images/8.png" alt="" />

</div>

<script>

window.onload=function () {

    var oMenu=document.getElementById("menu");

    var aImg=oMenu.getElementsByTagName("img");

    var aWidth=[];

    var i=0;

    for (i=0;i<aImg.length;i++) {

        //存储最初宽度

        aWidth.push(aImg[i].offsetWidth);

        //设置新的宽度

        aImg[i].width=parseInt(aImg[i].offsetWidth/2);

    }

    //鼠标移入事件

    document.onmousemove=function (event) {

        var event=event || window.event;

        for (i=0;i<aImg.length;i++) {

            /*

             * 勾股定理的应用，a/b为直角的两边

             * 计算鼠标到各种图片中心的直线距离

             */

            var a=event.clientX-aImg[i].offsetLeft-aImg[i].offsetWidth/2;

            var b=event.clientY-aImg[i].offsetTop-oMenu.offsetTop-aImg[i].offsetHeight/2;

            /*

             * 设置图片放大比例，先将取得的值除以一个数值（Math.sqrt(a*a+b*b)/300）

             * 然后再用1减去这个初始比例（距离越近，比例应越大）

             */

            var iScale=1-Math.sqrt(a*a+b*b)/300;

            /*

             * 如果鼠标距离图片太远，比例设置为0.5（该比例请与最初图片的设置保持一致）

             *

             */

            if (iScale<0.5) {

                iScale=0.5;

            };

            aImg[i].width=aWidth[i]*iScale;

        };

    };

};

</script>

</body>

</html>

实现原理：

拆分成单个图片的放大效果来看，具体的方法是计算鼠标指标到图片中心的距离，然后除以一个定值（随意），接着用 1 减去这个值（因为距离越近，比例越大），如果是鼠标指标距离图片太远会造成图片反而变小，因此作个判断，当这个比例小于某个值时，则设置为图片缩小的初始值。

1.Math.sqrt(x)：返回一个数的平方根。x 必需且是大于等于 0 的数。

案例下载>>Dock效果

Mac Dock 效果及原理（勾股定理）的更多相关文章

  1. 视差滚动（Parallax Scrolling）效果的原理与实现

    视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点:    1)直观的设计,快速的响应速度,更合适运用于单页面    2)差异滚动 分层视差    页面上很多的 ...

  2. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  3. ARP-NAT(MAC Address Translation)的原理

    本文部分图片来自: http://wiki.deliberant.com/faq/wireless-bridge-routing-arpnat/ https://wiki.openwrt.org/do ...

  4. 视差滚动(Parallax Scrolling)效果的原理和实现

    视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了这项技术. 一.什么是视差滚 ...

  5. 【转】视差滚动(Parallax Scrolling)效果的原理和实现

    原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...

  6. iOS开发——高级篇——iOS抽屉效果实现原理

    实现一个简单的抽屉效果: 核心思想:KVO实现监听mainV的frame值的变化 核心代码: #import "ViewController.h" // @"frame& ...

  7. MAC地址欺骗（原理及实验）

    MAC地址欺骗 MAC地址欺骗(或MAC地址盗用)通常用于突破基于MAC地址的局域网访问控制,例如在交换机上限定只转发源MAC地址修改为某个存在于访问列表中的MAC地址即可突破该访问限制,而且这种修改 ...

  8. transition:all 0.5s linear;进度条动画效果 制作原理

    Html: <span class="progress"><b ><i></i></b><em>50< ...

  9. VC++实现位图显示透明效果--实现原理

    我们在进行程序的界面设计时,常常希望将位图的关键部分,也既是图像的前景显示在界面上,而将位图的背景隐藏起来,将位图与界面很自然的融合在一起,本文介绍了透明位图的制作知识,并将透明位图在一个对话框中显示 ...

随机推荐

  1. OD: SEHOP

    SEHOP,Structed Exception Handling Overwrite Protection,一种比 SafeSEH 更严厉的保护机制.Windows Vista SP1 开始支持 S ...

  2. （转）js获取url参数值

    明天有空编辑下 今天做项目遇到js取得url地址问号后面的参数,找了下面的,用着非常好,项目是选项卡样式的,也就是一点击二级分类,底下的同样名字的背景变红(选项卡倍选中) http://www.cnb ...

  3. C#将图片字节流转为Base64直接放入html的img标签src属性中

    1,图片要转为byte[], 2,注意加上“data:image/jpeg;base64,”,这里jpeg可以换成其他. string html = "<img src='data:i ...

  4. 监听tomcat服务器启动/关闭并从配置文件中读取参数进行初始化

    监听tomcat服务器启动/关闭很简单(2步): 1. 建立一个类实现ServletContextListener接口,重写其中的方法(contextDestroyed和contextInitiali ...

  5. python的hashlib模块

    # -*- coding: utf-8 -*- """python 的MD5 sha1 模块""" import hashlib #md5的 ...

  6. kafka教程

    一.理论介绍(一)相关资料1.官方资料,非常详细:   http://kafka.apache.org/documentation.html#quickstart2.有一篇翻译版,基本一致,有些细节不 ...

  7. 微信php接入设计案列

    <?php namespace Home\Controller; use Think\Controller; use Com\Wechat; use Com\WechatAuth; class ...

  8. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  9. Sql Server索引（转载）

    官方说法: 聚集索引 一种索引,该索引中键值的逻辑顺序决定了表中相应行的物理顺序. 聚集索引确定表中数据的物理顺序.聚集索引类似于电话簿,后者按姓氏排列数据.由于聚集索引规定数据在表中的物理存储顺序, ...

  10. javascript 倒计时代码

    <script language="javascript" type="text/javascript"> var interval = 1000; ...