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邊，取得圖標大小與距離的反比比例

要查看最終效果以及具體實現，請用力點我