成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Meils / 3509人閱讀

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

我們先看下最后的效果

實(shí)現(xiàn)思路

要實(shí)現(xiàn)眼睛隨鼠標(biāo)一起運(yùn)動(dòng)，我們必須先求出眼睛的坐標(biāo)，也就是它的left和top值

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

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

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

a邊的長度為：鼠標(biāo)y軸的坐標(biāo) - （offsetY + r）

b邊的長度為：鼠標(biāo)x軸的坐標(biāo) - （offsetX + r）

部分實(shí)現(xiàn) 
計(jì)算offsetX和offsetY
// 旋轉(zhuǎn)軌道的left和top值，也就是圖中offsetX和offsetY
var wLeft = $(".wrap").offset().left
var wTop = $(".wrap").offset().top
// 旋轉(zhuǎn)軌道的半徑
var r = 12
計(jì)算a邊和b邊的長度
// b邊的長度
var diffX = ev.pageX - (wLeft + r)
// a邊的長度
var diffY = ev.pageY - (wTop + r)
計(jì)算α
// 弧度α
var deg = Math.atan(Math.abs(diffY) / Math.abs(diffX))
計(jì)算內(nèi)三角形的對(duì)邊和鄰邊
// 內(nèi)三角形的鄰邊
var x = Math.cos(deg) * r
// 內(nèi)三角形的對(duì)邊
var y = Math.sin(deg) * r
計(jì)算出眼睛的left值和top值
var left = (r + x) + "px"
var top = (r + y) + "px"
四象限角度問題

上面我們獲取了left值和top值，但是這只限于0~90度，也就是第四象限是可以了，關(guān)于四象限，我們上一張圖

當(dāng)鼠標(biāo)落在第三象限的時(shí)候，計(jì)算出來的角度應(yīng)該是90~180度，我們得出：

deg = Math.PI - deg

當(dāng)鼠標(biāo)落在第二象限的時(shí)候，計(jì)算出來的角度應(yīng)該是180~270度，我們得出：

deg = Math.PI + deg

當(dāng)鼠標(biāo)落在第一象限的時(shí)候，計(jì)算出來的角度應(yīng)該是270~360度，我們得出：

deg = 2 * Math.PI - deg
要查看最終效果以及具體實(shí)現(xiàn)，請(qǐng)用力點(diǎn)我

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84811.html

相關(guān)文章

  • 滾動(dòng)視差？CSS 不在話下

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

    RobinTang 評(píng)論0 收藏0

  • [轉(zhuǎn)]滾動(dòng)視差？CSS 不在話下/background attachment

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

    darry 評(píng)論0 收藏0

  • Redux概念之三: Action(動(dòng)作)與Action Creator(動(dòng)作創(chuàng)建器)

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

    沈儉 評(píng)論0 收藏0

  • 正確理解Vuex： 懂人生，就懂了Vuex

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

    URLOS 評(píng)論0 收藏0

  • webpack源碼分析之三：loader

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

    laznrbfe 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<