<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #div1{

                 width: 100%;

                 position: fixed;

                 text-align: center;

                 bottom: 0;

                 left: 0;

             }

             #div1 img{

                 width: 64px;

             }

         </style>

         <script type="text/javascript">

              window.onload=function()

              {

                  var oDiv1 = document.getElementById("div1");

                  var aImgs = oDiv1.getElementsByTagName("img");

                  var ainput = document.getElementsByTagName("input");

                  console.log(aImgs[0].getBoundingClientRect());

              document.onmousemove = function(ev) {

                     //计算鼠标到每个图片之间的直线距离

                     var e = ev || event;

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

                         //计算直线距离

                         //因为鼠标是到可视区的距离，所以，我们应该获取鼠标到可视区的距离-元素到可视区的距离

                         var a = Math.abs(e.clientY - aImgs[i].getBoundingClientRect().y - aImgs[i].offsetHeight / 2);

                         var b = Math.abs(e.clientX - aImgs[i].getBoundingClientRect().x - aImgs[i].offsetWidth / 2);

                         var c = Math.sqrt(a*a + b*b);

                         if (c > 300) {

                             c = 300;

                         }

                         aImgs[i].style.width = 128 - ( c * 0.2 ) + 'px';

                     }

                 }

              }

         </script>

     </head>

     <body>

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <input type="text" />

         <div id="div1">

             <img src="img/1.png" alt="" />

             <img src="img/2.png" alt="" />

             <img src="img/3.png" alt="" />

             <img src="img/4.png" alt="" />

             <img src="img/5.png" alt="" />

         </div>

     </body>

 </html>

问题：

只能在火狐下运行   谷歌下不行？

有待解决？？？

苹果dock效果的更多相关文章

  1. Mac Dock 效果及原理（勾股定理）

    这个是苹果机上的 Dock 效果,Windows 上也有一款专门的模拟软件——RocketDock. 代码如下: <!doctype html> <html> <head ...

  2. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  3. 基于jQuery实现苹果Dock样式的菜单

    爱编程小编之前我们分享过相当数量的jQuery菜单了,今天要给大家带来一款Dock样式的jQuery菜单,用过苹果的朋友都知道,它的Dock菜单非常酷,配合漂亮的图标就更加绚丽了.效果图如下: 在线预 ...

  4. 苹果Dock样式的菜单

    在线演示 本地下载

  5. jQuery/CSS3实现Android Dock效果

    在线演示 本地下载

  6. 8个超炫酷仿苹果应用的HTML5动画

    苹果的产品一直以精美的UI著称,无论是软件应用还是硬件设备.本文主要分享了8个很不错的HTML5动画应用,这些动画正式模仿了苹果的各类应用,有焦点图.钟表.菜单等HTML5应用和jQuery插件,大家 ...

  7. 原生JS实现苹果菜单

    今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...

  8. 推荐5个应用 jQuery 特效的精美特效

    1.jQuery歌词同步的音乐播放器插件 精巧实用 之前我们分享过很多音乐播放器和视频播放器,很多播放器的UI界面都非常酷,特别是利用HTML5和CSS3实现的一些动画特效.今天要分享的一款基于jQu ...

  9. 池建强 博客 Mac使用技巧 第一季

    第1天: 今天推送的Mac技巧: 使用OS X,我们可以充分利用系统提供的多个Space,把不同的程序放到不同的Space,让我们的系统更有扩展性.如何增加Space呢?四指上推,在桌面的最上方会出现 ...

随机推荐

  1. 关于mysql严格模式的开启、关闭

    由于项目中对一些默认值设置问题,以及种种原因,mysql数据库需要使用非严格模式开发(mysql最近的版本默认是开启严格模式的). linux下mysql服务下操作步骤是: 1.进入mysql服务   ...

  2. iOS 自定义layer的两种方式

    在iOS中,你能看得见摸得着的东西基本都是UIView,比如一个按钮,一个标签,一个文本输入框,这些都是UIView: 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个图层 在创建UIVi ...

  3. 挖坑：CF712E

    #include<cstdio> #include<cstring> #include<algorithm> #define maxn 1000005 using ...

  4. InnoDB引擎数据存放位置

    InnoDB引擎的mysql数据存放位置 采用InnoDB引擎的数据库创建表后,会在mysql数据存放目录下生成一个和数据库名相同的目录.该目录下包涵一个db.opt文件和该库下所有表同名的frm文件 ...

  5. 使用 FormsAuthentication 来进行登录验证

    1.在web.config文件中,<system.web>/<authentication>配置节用于对验证进行配置.为<authentication>节点提供mo ...

  6. nginx在window上无法启动的问题

    内容列表: 简要介绍 下载安装 配置测试 一.简要介绍 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP ...

  7. [河南省ACM省赛-第三届] 素数 （nyoj 169）

    #include <iostream> #include <cstdio> #include <queue> #include <cstring> #i ...

  8. iosAPP打包上架xcode中Archive提交成功以后，不提示构建版本问题

    最近在项目更新时遇到Archive提交到开发者中心成功后,一直不提示构建版本信息,可能导致的原因是由于ios10以后对于APP中调用手机相册或摄像头麦克风时需要配置plist文件,配置如下内容或许会解 ...

  9. sharepoint:各种阀值

    //来源:http://www.cnblogs.com/jindahao/archive/2012/04/25/2469791.html 引用自JonyZhu,如下: 技术参数 值 列表最大记录数 5 ...

  10. 【卷二】网络三—UDP服务器与客户端

    这是另一个类型的服务器/客户端,无连接的 UDP: (User Datagram Protocol) 用户数据报协议 参考: P58~P60 UDP 时间戳服务器 [时间戳 就是ctime()显示的内 ...