这个是苹果机上的 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. hdu 4772

    题意:给你两个矩阵,一个矩阵旋转90度,180度,270度, 然后和另外一个矩阵进行比较,如果对应值相同,则加一,最后得出最大的值 题目没什么难度....主要是纪念下....貌似这一题是当时比赛前一个 ...

  2. css ie hack整理

    网上有很多关于ie hack的文章,可能由于文章发布后ie的版本还在升级.所以导致有些hack写法已经不适用了.以下是本人整理的ie6-11的一些hack常用写法.(以下默认文档模式为标准模式) 1. ...

  3. raw和字符串的转换。

    hextoraw():十六进制字符串转换为raw: rawtohex():将raw串转换为十六进制: select hextoraw('gggggg') from dual

  4. java静态代码块 类加载顺序问题。

    class B extends Object { static {System.out.println("Load B");} public B(){System.out.prin ...

  5. CactiEZ 中文版V10.1安装使用以及139邮箱短信报警设置

    说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合Cacti等相关软件,重新编译而成的一个操作系统!   说明:CactiEZ中文版V10.1是基于CentOS 6.0系统,整合 ...

  6. oralce中exists not exists in not in对于NULL的处理

    1.   先讨论 in 与 not in中存在NULL的情况, sql语句如下: 1 select 1 result1 from dual where 1 not in (2, 3); 2 3 4 s ...

  7. 手动安装svn到eclipse

    今天为了装个svn搞得我焦头烂额~ 1.下载site-1.10.10.zip.(http://download.csdn.net/download/codepython/9082533) 2.在ecl ...

  8. C# 配置文件读取与修改(转)

    C# 配置文件读取与修改   配置文件在很多情况下都使用到, 配置文件分为两种 一种是应用程序的配置文件, 一种是web的配置文件. 两种配置文件最大的区别是web的配置文件更新之后会实时更新, 应用 ...

  9. 正则表达式中/g的含义

    关于正则表达式 g,m 参数的总结,为了回答“正则表达式(/[^0-9]/g,'')中的"/g"是什么意思?”   为了解答“正则表达式(/[^0-9]/g,'')中的" ...

  10. Linux定时任务命令crontab

    作为一个php码农,linux接触总是很少,但又是必须会的一项技能,今天学到的linux命令是crontab命令. 注:以下总结基于Ubuntu 12.04 去/etc目录下看看 先去Ubuntu的/ ...