这个是苹果机上的 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. java08双重循环打印图形

    // 九九乘法表 外层循环每执行一次,内层循环执行一遍 for (int i = 1; i <= 9; i++) { // 外层控制的是行数 for (int j = 1; j <= i; ...

  2. file控件change事件触发问题

    最近,项目中需要用到一个图片上传的功能,我用的file控件来选取图片文件,然后利用js读取文件来预览图片,最后再根据用户的操作来决定是否上传文件. 其中碰到了一个奇怪的问题:在选取完第一张图片,并上传 ...

  3. 关于ASP.Net 4.0的ClientID

    我们知道因为在原来的ASP.NET应用程序中使用服务端控件在生成ClientID的时,是很难控制的,特别是在嵌套的控件的时候,比如在多个嵌套Repeater中要控制某一个控件生成的html的ID属性, ...

  4. 《CSS网站布局实录》学习笔记（四）

    第四章 CSS网站元素设计 4.1 网站导航 网站导航是网站中最重要的元素.从形式上看,网站导航主要分横向导航.纵向导航.下拉及多级菜单导航灯3种常见形式. 横向导航:作为门户网站的设计而言,主导航一 ...

  5. LayoutInflater.inflate() 参数研究

    参考连接:http://blog.csdn.net/lovexieyuan520/article/details/9036673 http://www.2cto.com/kf/201407/31305 ...

  6. 还是把一个课程设计作为第一篇文章吧——学生学籍管理系统（C语言）

    #include <stdio.h> #include<stdlib.h> #include<string.h> typedef struct student { ...

  7. SQL从入门到基础 - 02 SQLServer的使用

    一.SQLServer的管理 服务器名称:ICECOA-81DEA7A2.\SQLEXPRESS 1. 数据库->表->字段->主键 2. 编辑表 二.数据类型 1. bit:相当于 ...

  8. PL/SQL中的变量案例解析

    1.标量: ag1: declare v_ename emp.ename%type;--自己称为单变量 begin select ename into v_ename from emp where e ...

  9. 异步socket大并发实现

    using System;using System.Collections.Generic;using System.Linq;using System.Net;using System.Net.So ...

  10. ecshop模板如何修改详细图解

    ecshop模板如何修改?很多人在问这个问题,今天就以图解的方式给大家详细说下.相信学完之后,你会很清楚如何修改ecshop模板,不管你是初学者还是程序高手. 1, ecshop的模板结构 ecsho ...