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

Meils 發布于2019-08-20 18:52 / 3458人閱讀

摘要：我們先看下最后的效果實現思路要實現眼睛隨鼠標一起運動，我們必須先求出眼睛的坐標，也就是它的和值為了取到和值，我們只要知道角的內三角形的對邊和鄰邊的長度即可為了取到對邊和鄰邊，我們只需要知道角的弧度即可角的弧度，我們可能通過圖中邊和邊，再使用

我們先看下最后的效果

實現思路

要實現眼睛隨鼠標一起運動，我們必須先求出眼睛的坐標，也就是它的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

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

云服務器 GPU云服務器跟隨效果 javascript翻頁效果 java與動畫效果 javascript 函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84811.html

滾動視差？CSS 不在話下

摘要：可以感受下種不同取值的不同效果使用實現滾動視差首先，我們使用來實現滾動視差。何為滾動視差視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為網頁設計的熱點趨勢，越來越多的網站應用了這項技術。通常而言，滾動視差在前端需要輔助 Javascript 才能實現。當然，其實 CSS 在實現滾動視差效果方面，也有著不俗...

RobinTang 2019-04-23 13:29 評論0 收藏0
[轉]滾動視差？CSS 不在話下/background attachment

摘要：通常而言，滾動視差在前端需要輔助才能實現。當然，其實在實現滾動視差效果方面，也有著不俗的能力。此關鍵字表示背景相對于視口固定。使用實現滾動視差言歸正傳，下面介紹另外一種使用實現的滾動視差效果，利用的是。? ? 何為滾動視差視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。作為網頁設計的熱點趨勢，越來越多的網站應...

darry 2019-04-23 13:25 評論0 收藏0
Redux概念之三: Action(動作)與Action Creator(動作創建器)

摘要：那么動作生成器又是什么在程序語言的函數庫中，如果是個英文的名詞，通常都是代表某種對象或數據格式，例如動作就是個單純的對象。這兩個是Flux架構中的參與成員，Redux中有說明Action的定義: Actions(動作)是從你的應用送往store(存儲)的信息負載你可能會一直在Action(動作)這里看到payload這個字詞，它是負載或有效數據的意思，這個字詞的意思解說你可以看一下...

沈儉 2019-08-20 13:59 評論0 收藏0
正確理解Vuex：懂人生，就懂了Vuex

摘要：人生，遠不止是錢。如何管理，一個更復雜的人生人生，就是一個大型應用。把復雜的人間，拆解成了行動與目標。所以，，以及和兩個函數，就構成了的邏輯?，F在，你不僅完全理解了的設計哲學，你更懂得了如何管理人生。 Veux的哲學，實質上是人生的哲學。看一看這張圖。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...

URLOS 2019-08-23 16:47 評論0 收藏0
webpack源碼分析之三：loader

摘要：本次介紹的則是用來解決這類問題的。實現模塊實現思路將配置內的命令的的內聯從前至后組成一個數組。所有字符串內部又可以截取，獲取完整的。分析并解析該數組內的字符串，獲取各個的絕對路徑。前言在webpack特性里面，它可以支持將非javaScript文件打包,但前面寫到webpack的模塊化打包只能應用于含有特定規范的JavaScript文件。本次介紹的loader則是用來解決這類問題的...

laznrbfe 2019-08-26 12:01 評論0 收藏0