摘要:表示法那么用表示为中菜单的放大效果运行效果图特点图标的大小与鼠标的距离成反比,距离越远,图标越小,距离越近,图标越大。
背景
三角函数是上学时为了应付考试,不得不学的一些知识,当时并没有感觉有什么用处,现在回头再看,尤其是和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边,取得图标大小与距离的反比比例
要查看最终效果以及具体实现,请用力点我
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91420.html
摘要:深度神经网络所代表的人工智能技术被认为是这一次技术变革的基石之一。导语深度神经网络目前是许多人工智能应用的基础。深度神经网络概述根据应用情况不同,深度神经网络的形态和大小也各异。 深度神经网络(DNN)所代表的人工智能技术被认为是这一次技术变革的基石(之一)。近日,由 IEEE Fellow Joel Emer 领导的一个团队发布了一篇题为《深度神经网络的有效处理:教程和调研(Efficie...
摘要:但是,如果必须更改实现方法以指向不同的数据库,则单元测试将失败,因为它们是耦合逻辑的实现细节。 showImg(https://segmentfault.com/img/bVbwf0d?w=786&h=155); showImg(https://segmentfault.com/img/bVbwf8m?w=941&h=578); React是一个用于构建用户界面的JavaScript库...
摘要:微信小程序官方并未提供分享到朋友圈的方法,所以目前基本整个行业都是使用生成图文海报发到朋友圈,然后识别太阳码进入到小程序。背景图片和微信头像合成后清晰度不够。 微信小程序官方并未提供分享到朋友圈的方法,所以目前基本整个行业都是使用生成图文海报发到朋友圈,然后识别太阳码进入到小程序。 通过谷歌或者百度有很多同学已经提供了一些解决方案,但是在我们使用后效果并不是很理想,主要体现在以下方面:...
阅读 2545·2021-09-06 15:02
阅读 3146·2021-09-02 10:18
阅读 2780·2019-08-30 15:44
阅读 664·2019-08-30 15:43
阅读 1923·2019-08-30 14:08
阅读 2740·2019-08-30 13:16
阅读 1353·2019-08-26 13:52
阅读 914·2019-08-26 12:21