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边，取得图标大小与距离的反比比例

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