javascript與三角函數(shù)之三：眼睛跟隨效果

Meils 發(fā)布于2019-08-20 18:52 / 3462人閱讀

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

我們先看下最后的效果

實現(xiàn)思路

要實現(xiàn)眼睛隨鼠標一起運動，我們必須先求出眼睛的坐標，也就是它的left和top值

為了取到left和top值，我們只要知道α角的內(nèi)三角形的對邊和鄰邊的長度即可

為了取到對邊和鄰邊，我們只需要知道α角的弧度即可

α角的弧度，我們可能通過圖中a邊和b邊，再使用arctan(a/b)，即可求得

a邊的長度為：鼠標y軸的坐標 - （offsetY + r）

b邊的長度為：鼠標x軸的坐標 - （offsetX + r）

部分實現(xiàn)

計算offsetX和offsetY

// 旋轉(zhuǎn)軌道的left和top值，也就是圖中offsetX和offsetY
var wLeft = $(".wrap").offset().left
var wTop = $(".wrap").offset().top
// 旋轉(zhuǎn)軌道的半徑
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))

計算內(nèi)三角形的對邊和鄰邊

// 內(nèi)三角形的鄰邊
var x = Math.cos(deg) * r
// 內(nèi)三角形的對邊
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

要查看最終效果以及具體實現(xiàn)，請用力點我

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

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/84811.html

滾動視差？CSS 不在話下

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

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

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

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

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

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

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

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

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

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