这个是苹果机上的 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. noip 2009 道路游戏

    /*10分钟的暴力 意料之中的5分..*/ #include<iostream> #include<cstdio> #include<cstring> #defin ...

  2. 向ASP.NET服务器控件中嵌入CSS资源

    Step1:于[项目解决方案]中右键新建[ASP.NET服务器控件]项目 Step2:于项目中添加[Resources]文件夹,于该文件夹下添加[CSS文件] Step3:单击该CSS文件,并将[属性 ...

  3. linux学习笔记<命令介绍>

    主要介绍日常工作中一些常用的命令,内容均整理自慕课网 命令提示符 [root@hgs ~]# 其中: root : 当前登录用户 hgs : 主机名 ~ : 当前所在目录(家目录),对于root用户, ...

  4. Hadoop源码解析之 rpc通信 client到server通信

    rpc是Hadoop分布式底层通信的基础,无论是client和namenode,namenode和datanode,以及yarn新框架之间的通信模式等等都是采用的rpc方式. 下面我们来概要分析一下H ...

  5. java.lang.NumberFormatException: empty String 错误

    原因:前台获取的字符串,后台类型转换,与之对应的实体类中却是Integer类型,所以会报错. 排错情况:1.先检查数据库与实体类中的类型是否一致 2.检查类型转换代码,如果需要加入异常处理

  6. Javascript 常用函数【1】

    1:基础知识 1 创建脚本块 1: <script language=”JavaScript”> 2: JavaScript code goes here 3: </script&g ...

  7. WPF画N角芒星，正N角星

    计算顶部三角形坐标方法: /// <summary> /// 获取顶三角形坐标 /// </summary> /// <param name="r"& ...

  8. mysql group by 用法解析

    group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表.SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子句定义的每个组各返回一个结果. ...

  9. JavaWeb学习笔记之JSP（二）

    1.1.  JSP的指令: 1.   什么是JSP 指令? JSP 指令: JSP指令(directive)是为JSP引擎而设计的,它们并不直接产生任何可见输出, 而只是告诉引擎如何处理JSP页面中的 ...

  10. C++中getline函数的使用

    代码: #include <iostream> #include <cstdio> using namespace std; int main(){ char* s; s = ...