这个是苹果机上的 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. 面试题 HashMap 数据结构 实现原理

    数据结构 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组:数组存储区间是连续的,占用内存严重,故空间复杂的很大.但数组的二分查找时间复杂度小,为O ...

  2. ASP.NET-FineUI开发实践-9(四)

    现在是这么个问题,在开发中表格是动态出来的,就是标准板是全部字段列出,客户要根据情况列出自己想要的,在增加操作页面的同时要是能用前台自带的功能直接保存到后台就好了,现在的列显示和隐藏是不回发的. 1. ...

  3. table的border-collapse属性与border-spacing属性

    table border-collapse:collapse; 表示边框合并在一起. border-collapse:separate;表示边框之间的间距,间距的大小用border-spacing:p ...

  4. 在C#中internal关键字是什么意思？和protected internal区别

    我来补充一下,对于一些大型的项目,通常由很多个DLL文件组成,引用了这些DLL,就能访问DLL里面的类和类里面的方法.比如,你写了一个记录日志的DLL,任何项目只要引用此DLL就能实现记录日志的功能, ...

  5. PHP 类型比较表

    以下的表格显示了 PHP 类型和比较运算符在松散和严格比较时的作用.该补充材料还和类型戏法的相关章节内容有关.同时,大量的用户注释和 » BlueShoes 的工作也给该材料提供了帮助. 在使用这些表 ...

  6. 跟踪对象属性值的修改, 设置断点(Break on property change)

    代码 //Break on property change (function () { var localValue; Object.defineProperty(targetObject, 'pr ...

  7. web项目环境搭建（1）：建立一个maven项目

    一.maven简介以及常用概念 1.Maven是一个项目管理和整合的工具.Maven为开发者提供了一套完整的构建生命周期框架.开发团队基本不用花多少时间就能自动完成工程的基础构建配置,因为Maven使 ...

  8. 武汉科技大学ACM ：1001: 华科版C语言程序设计教程（第二版）课后习题3.12

    Problem Description 输入n,输出对应的边长为n的空心正六边形. 为方便看图,样例中点 '.' 表示空格,打印图形时请打印空格而非小圆点. Input 边长n.(n<=20) ...

  9. hdu1025 最长不下降子序列nlogn算法

    C - DP Crawling in process... Crawling failed Time Limit:1000MS     Memory Limit:32768KB     64bit I ...

  10. Java中的HashMap和Hashtable

    代码: import java.util.*; public class test{ public static void main(String[] args) { HashMap hm = new ...