javascript與三角函數(shù)之一：Mac圖標(biāo)線性放大效果

MartinDai 發(fā)布于2019-08-22 10:54 / 2535人閱讀

摘要：表示法那么用表示為中菜單的放大效果運(yùn)行效果圖特點(diǎn)圖標(biāo)的大小與鼠標(biāo)的距離成反比，距離越遠(yuǎn)，圖標(biāo)越小，距離越近，圖標(biāo)越大。

背景

三角函數(shù)是上學(xué)時(shí)為了應(yīng)付考試，不得不學(xué)的一些知識(shí)，當(dāng)時(shí)并沒(méi)有感覺有什么用處，現(xiàn)在回頭再看，尤其是和JavaScript結(jié)合，能做出很多神奇的效果，這一系列文章主要講講三角函數(shù)的基礎(chǔ)，并根據(jù)基礎(chǔ)知識(shí)分析一下效果的原理，再通過(guò)Javascript來(lái)實(shí)現(xiàn)，我們現(xiàn)在開始！

勾股定理

我們先來(lái)看下直角三角形

勾股定理的定義：在直角三角形中，兩直角邊的平方和等于斜邊的平方。用公式表示：$$a^2 + b^2 = c^2$$

勾股定理的主要作用就是求兩間的距離，我們經(jīng)常有這樣的需求，瀏覽器窗口有兩個(gè)dom元素，我們需要知道這兩個(gè)dom的距離

我們把三角形畫出來(lái)：

由圖中我們可以求出：

a = d2.pageX - d1.pageX
b = d2.pageY - d1.pageY

根據(jù)上面的勾股定理，我們就可以求出c邊的長(zhǎng)度。

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菜單的放大效果

運(yùn)行效果圖

特點(diǎn)

圖標(biāo)的大小與鼠標(biāo)的距離成反比，距離越遠(yuǎn)，圖標(biāo)越小，距離越近，圖標(biāo)越大。那么現(xiàn)在的核心的問(wèn)題就成了，怎么知道鼠標(biāo)與圖標(biāo)的距離了

原理圖

思路

a邊的長(zhǎng)度為：ev.pageX - dom1.offsetLeft

b邊的長(zhǎng)度為：dom1.offsetTop - ev.pageY

根據(jù)勾股定理，可以得到c邊的長(zhǎng)度

根據(jù)c邊，取得圖標(biāo)大小與距離的反比比例

要查看最終效果以及具體實(shí)現(xiàn)，請(qǐng)用力點(diǎn)我

GPU云服務(wù)器云服務(wù)器放大效果圖片放大效果 jquery放大效果實(shí)現(xiàn)放大鏡效果

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91420.html

相關(guān)文章

web字體

摘要：字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識(shí)。推薦網(wǎng)站字庫(kù)成立于年，推出的第一個(gè)自定義圖標(biāo)字體生成器，它允許用戶選擇他們所需要的圖標(biāo)，使它們成一字型。這個(gè)字體圖標(biāo)可以在下免費(fèi)使用。1.字體格式不同瀏覽器所支持的字體格式是不一樣的，我們有必要了解一下有關(guān)字體格式的知識(shí)。1、TureType(.ttf)格式.ttf字體是Windows和Mac的最常見的字體，...

番茄西紅柿 2019-04-22 19:50 評(píng)論0 收藏1
深度神經(jīng)網(wǎng)絡(luò)全面概述：從基本概念到實(shí)際模型和硬件基礎(chǔ)

摘要：深度神經(jīng)網(wǎng)絡(luò)所代表的人工智能技術(shù)被認(rèn)為是這一次技術(shù)變革的基石之一。導(dǎo)語(yǔ)深度神經(jīng)網(wǎng)絡(luò)目前是許多人工智能應(yīng)用的基礎(chǔ)。深度神經(jīng)網(wǎng)絡(luò)概述根據(jù)應(yīng)用情況不同，深度神經(jīng)網(wǎng)絡(luò)的形態(tài)和大小也各異。深度神經(jīng)網(wǎng)絡(luò)（DNN）所代表的人工智能技術(shù)被認(rèn)為是這一次技術(shù)變革的基石（之一）。近日，由 IEEE Fellow Joel Emer 領(lǐng)導(dǎo)的一個(gè)團(tuán)隊(duì)發(fā)布了一篇題為《深度神經(jīng)網(wǎng)絡(luò)的有效處理：教程和調(diào)研（Efficie...

Sanchi 2019-04-25 18:11 評(píng)論0 收藏0
React Developers的10個(gè)超實(shí)用神奇工具

摘要：但是，如果必須更改實(shí)現(xiàn)方法以指向不同的數(shù)據(jù)庫(kù)，則單元測(cè)試將失敗，因?yàn)樗鼈兪邱詈线壿嫷膶?shí)現(xiàn)細(xì)節(jié)。 showImg(https://segmentfault.com/img/bVbwf0d?w=786&h=155); showImg(https://segmentfault.com/img/bVbwf8m?w=941&h=578); React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫(kù)...

Songlcy 2019-08-26 10:44 評(píng)論0 收藏0
js框架或者庫(kù)

摘要：使用開發(fā)富文本編輯器是開源的開發(fā)富文本編輯器開發(fā)框架。提供了一系列開發(fā)富文本編輯器的工具。本文通過(guò)開發(fā)一些簡(jiǎn)單的富文本編輯器介紹提供的各種能力簡(jiǎn)單易用的開源動(dòng)畫圖標(biāo)庫(kù)如果你用過(guò)等圖標(biāo)，你可能會(huì)覺得它們很好看，用起來(lái)很很方便。使用 flv.js 做直播 flv.js 是來(lái)自 Bilibli 的開源項(xiàng)目。它解析 FLV 文件喂給原生 HTML5 Video 標(biāo)簽播放音視頻數(shù)據(jù)，使瀏覽器在...

Winer 2019-08-22 11:16 評(píng)論0 收藏0
Laravel 生成小程序圖文海報(bào)最佳方案之一

摘要：微信小程序官方并未提供分享到朋友圈的方法，所以目前基本整個(gè)行業(yè)都是使用生成圖文海報(bào)發(fā)到朋友圈，然后識(shí)別太陽(yáng)碼進(jìn)入到小程序。背景圖片和微信頭像合成后清晰度不夠。微信小程序官方并未提供分享到朋友圈的方法，所以目前基本整個(gè)行業(yè)都是使用生成圖文海報(bào)發(fā)到朋友圈，然后識(shí)別太陽(yáng)碼進(jìn)入到小程序。通過(guò)谷歌或者百度有很多同學(xué)已經(jīng)提供了一些解決方案，但是在我們使用后效果并不是很理想，主要體現(xiàn)在以下方面：...

piglei 2019-07-01 10:50 評(píng)論0 收藏0