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

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

转载于:https://www.cnblogs.com/milly/p/dock-effect.html

Mac Dock 效果及原理（勾股定理）相关推荐

Qt 实现钢笔画线效果详细原理
前言上一篇文章:Qt 实现画线笔锋效果详细原理,根据这篇介绍的实现笔锋效果的原理,我们很容易实现另外一种笔效:钢笔. 所谓的钢笔笔效,就是真实还原钢笔书写出来的线条效果,其特征就是:根据笔的绘制速度 ...
php拖拽原理,JS拖拽效果及原理解析
这篇文章主要介绍了如何实现js拖拽效果及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下元素拖拽分成3个步骤:按下鼠标,移动鼠标,松开鼠标. ...
html5 苹果 dock,基于JQuery模仿苹果桌面的Dock效果(初级版)
新的一天新的开始,今天要分享的是用JQuery模仿苹果操作系统桌面的Dock效果,之所以称之为初级版,是因为其中还有一些bug,显示效果并不稳定.由于时间的关系,这些bug还没有修复,希望高手们不吝赐 ...
Mac Dock栏显示/隐藏无延迟
Mac Dock栏显示/隐藏无延迟终端输入:defaults write com.apple.Dock autohide-delay -float 0 && killall Dock ...
Scaler for Mac(MIDI效果插件)
Scaler for Mac是一款适用于Cubase,Ableton Live,Studio One,Logic Pro X等软件的MIDI效果插件.本次Mac天空为您带来最新的scaler插件下载, ...
仿苹果Mac Dock任务栏
之前看到网上有人做了仿苹果任务栏的,于是跟着也做了一个,下面就是演示图片gif 下面是完整的HTML代码: <!--作者:shsgear@qq.com时间:2016-11-11描述:苹果mac ...
html动画的原理,HTML5 Canvas动画效果实现原理
在线演示使用html5画布能够帮助我们快速实现简单的动画效果,基本原理如下: 每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearrect(0, 0, x, ...
Android手机与vr交互暴风魔镜3D效果显示原理
首先讲到VR,谈谈个人体会,半年前看到淘宝上的vr眼镜盒为了促销标题图片都是非常性感的,还有海量你懂得资源.到最近在淘宝搜索vr暴风魔镜都正规了,而且销售量庞大还有新闻上很多vr的科技前沿资讯可以看 ...
Mac的Dock栏是什么？Mac Dock栏使用技巧
Dock栏就是Mac电脑屏幕下方的那一排快捷键,我们可以把自己常用的程序放到Dock上面,这样可以帮助我们快速的打开自己想要打开的文件和程序,默认情况下,OS X 的 Dock 置于屏幕的底部.当你第 ...

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

Mac Dock 效果及原理（勾股定理）相关推荐

最新文章

热门文章