javascript與三角函數之一：Mac圖標線性放大效果

MartinDai 發布于2019-08-22 10:54 / 2458人閱讀

摘要：表示法那么用表示為中菜單的放大效果運行效果圖特點圖標的大小與鼠標的距離成反比，距離越遠，圖標越小，距離越近，圖標越大。

背景

三角函數是上學時為了應付考試，不得不學的一些知識，當時并沒有感覺有什么用處，現在回頭再看，尤其是和JavaScript結合，能做出很多神奇的效果，這一系列文章主要講講三角函數的基礎，并根據基礎知識分析一下效果的原理，再通過Javascript來實現，我們現在開始！

勾股定理

我們先來看下直角三角形

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

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

我們把三角形畫出來：

由圖中我們可以求出：

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

根據上面的勾股定理，我們就可以求出c邊的長度。

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

運行效果圖

特點

圖標的大小與鼠標的距離成反比，距離越遠，圖標越小，距離越近，圖標越大。那么現在的核心的問題就成了，怎么知道鼠標與圖標的距離了

原理圖

思路

a邊的長度為：ev.pageX - dom1.offsetLeft

b邊的長度為：dom1.offsetTop - ev.pageY

根據勾股定理，可以得到c邊的長度

根據c邊，取得圖標大小與距離的反比比例

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

云服務器 GPU云服務器放大效果圖片放大效果 jquery放大效果實現放大鏡效果

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

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

web字體

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

番茄西紅柿 2019-04-22 19:50 評論0 收藏1
深度神經網絡全面概述：從基本概念到實際模型和硬件基礎

摘要：深度神經網絡所代表的人工智能技術被認為是這一次技術變革的基石之一。導語深度神經網絡目前是許多人工智能應用的基礎。深度神經網絡概述根據應用情況不同，深度神經網絡的形態和大小也各異。深度神經網絡（DNN）所代表的人工智能技術被認為是這一次技術變革的基石（之一）。近日，由 IEEE Fellow Joel Emer 領導的一個團隊發布了一篇題為《深度神經網絡的有效處理：教程和調研（Efficie...

Sanchi 2019-04-25 18:11 評論0 收藏0
React Developers的10個超實用神奇工具

摘要：但是，如果必須更改實現方法以指向不同的數據庫，則單元測試將失敗，因為它們是耦合邏輯的實現細節。 showImg(https://segmentfault.com/img/bVbwf0d?w=786&h=155); showImg(https://segmentfault.com/img/bVbwf8m?w=941&h=578); React是一個用于構建用戶界面的JavaScript庫...

Songlcy 2019-08-26 10:44 評論0 收藏0
js框架或者庫

摘要：使用開發富文本編輯器是開源的開發富文本編輯器開發框架。提供了一系列開發富文本編輯器的工具。本文通過開發一些簡單的富文本編輯器介紹提供的各種能力簡單易用的開源動畫圖標庫如果你用過等圖標，你可能會覺得它們很好看，用起來很很方便。使用 flv.js 做直播 flv.js 是來自 Bilibli 的開源項目。它解析 FLV 文件喂給原生 HTML5 Video 標簽播放音視頻數據，使瀏覽器在...

Winer 2019-08-22 11:16 評論0 收藏0
Laravel 生成小程序圖文海報最佳方案之一

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

piglei 2019-07-01 10:50 評論0 收藏0