javascript与三角函数之一：Mac图标线性放大效果

背景

三角函数是上学时为了应付考试，不得不学的一些知识，当时并没有感觉有什么用处，现在回头再看，尤其是和JavaScript结合，能做出很多神奇的效果，这一系列文章主要讲讲三角函数的基础，并根据基础知识分析一下效果的原理，再通过Javascript来实现，我们现在开始！

勾股定理

我们先来看下直角三角形

勾股定理的定义：在直角三角形中，两直角边的平方和等于斜边的平方。用公式表示：$$a^2 + b^2 = c^2$$

勾股定理的主要作用就是求两间的距离，我们经常有这样的需求，浏览器窗口有两个dom元素，我们需要知道这两个dom的距离

我们把三角形画出来：

由图中我们可以求出：

a = d2.pageX - d1.pageX
b = d2.pageY - d1.pageY

根据上面的勾股定理，我们就可以求出c边的长度。

javascript表示法

$$a^2 + b^2 = c^2$$
那么
$$c = \sqrt{a^2 + b^2}$$

用javascript表示为：

var c = Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))

OSX中docker菜单的放大效果

运行效果图

特点

图标的大小与鼠标的距离成反比，距离越远，图标越小，距离越近，图标越大。那么现在的核心的问题就成了，怎么知道鼠标与图标的距离了

原理图

思路

• a边的长度为：ev.pageX - dom1.offsetLeft
• b边的长度为：dom1.offsetTop - ev.pageY
• 根据勾股定理，可以得到c边的长度
• 根据c边，取得图标大小与距离的反比比例

要查看最终效果以及具体实现，请用力点我