javascript與三角函數之三：眼睛跟隨效果

咱們先看下最後的效果

實現思路

• 要實現眼睛隨鼠標一塊兒運動，咱們必須先求出眼睛的座標，也就是它的left和top值
• 爲了取到left和top值，咱們只要知道α角的內三角形的對邊和鄰邊的長度便可
• 爲了取到對邊和鄰邊，咱們只須要知道α角的弧度便可
• α角的弧度，咱們可能經過圖中a邊和b邊，再使用arctan(a/b)，便可求得
• a邊的長度爲：鼠標y軸的座標 - （offsetY + r）
• b邊的長度爲：鼠標x軸的座標 - （offsetX + r）

部分實現

計算offsetX和offsetY

// 旋轉軌道的left和top值，也就是圖中offsetX和offsetY
var wLeft = $('.wrap').offset().left
var wTop = $('.wrap').offset().top
// 旋轉軌道的半徑
var r = 12

計算a邊和b邊的長度

// b邊的長度
var diffX = ev.pageX - (wLeft + r)
// a邊的長度
var diffY = ev.pageY - (wTop + r)

計算α

// 弧度α
var deg = Math.atan(Math.abs(diffY) / Math.abs(diffX))

計算內三角形的對邊和鄰邊

// 內三角形的鄰邊
var x = Math.cos(deg) * r
// 內三角形的對邊
var y = Math.sin(deg) * r

計算出眼睛的left值和top值

var left = (r + x) + 'px'
var top = (r + y) + 'px'

四象限角度問題

上面咱們獲取了left值和top值，可是這隻限於0~90度，也就是第四象限是能夠了，關於四象限，咱們上一張圖

當鼠標落在第三象限的時候，計算出來的角度應該是90~180度，咱們得出：

deg = Math.PI - deg

當鼠標落在第二象限的時候，計算出來的角度應該是180~270度，咱們得出：

deg = Math.PI + deg

當鼠標落在第一象限的時候，計算出來的角度應該是270~360度，咱們得出：

deg = 2 * Math.PI - deg

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