javascript与三角函数之一：Mac图标线性放大效果

MartinDai 发布于2019-08-22 10:54 / 2325人阅读

摘要：表示法那么用表示为中菜单的放大效果运行效果图特点图标的大小与鼠标的距离成反比，距离越远，图标越小，距离越近，图标越大。

背景

三角函数是上学时为了应付考试，不得不学的一些知识，当时并没有感觉有什么用处，现在回头再看，尤其是和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边，取得图标大小与距离的反比比例

要查看最终效果以及具体实现，请用力点我

私有云混合云放大效果图片放大效果 jquery放大效果实现放大镜效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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