javascript与三角函数之三：眼睛跟随效果

Meils 发布于2019-08-20 18:52 / 3451人阅读

摘要：我们先看下最后的效果实现思路要实现眼睛随鼠标一起运动，我们必须先求出眼睛的坐标，也就是它的和值为了取到和值，我们只要知道角的内三角形的对边和邻边的长度即可为了取到对边和邻边，我们只需要知道角的弧度即可角的弧度，我们可能通过图中边和边，再使用

我们先看下最后的效果

实现思路

要实现眼睛随鼠标一起运动，我们必须先求出眼睛的坐标，也就是它的left和top值

为了取到left和top值，我们只要知道α角的内三角形的对边和邻边的长度即可

为了取到对边和邻边，我们只需要知道α角的弧度即可

α角的弧度，我们可能通过图中a边和b边，再使用arctan(a/b)，即可求得

a边的长度为：鼠标y轴的坐标 - （offsetY + r）

b边的长度为：鼠标x轴的坐标 - （offsetX + r）

部分实现

计算offsetX和offsetY

// 旋转轨道的left和top值，也就是图中offsetX和offsetY
var wLeft = $(".wrap").offset().left
var wTop = $(".wrap").offset().top
// 旋转轨道的半径
var r = 12

计算a边和b边的长度

// b边的长度
var diffX = ev.pageX - (wLeft + r)
// a边的长度
var diffY = ev.pageY - (wTop + r)

计算α

// 弧度α
var deg = Math.atan(Math.abs(diffY) / Math.abs(diffX))

计算内三角形的对边和邻边

// 内三角形的邻边
var x = Math.cos(deg) * r
// 内三角形的对边
var y = Math.sin(deg) * r

计算出眼睛的left值和top值

var left = (r + x) + "px"
var top = (r + y) + "px"

四象限角度问题

上面我们获取了left值和top值，但是这只限于0~90度，也就是第四象限是可以了，关于四象限，我们上一张图

当鼠标落在第三象限的时候，计算出来的角度应该是90~180度，我们得出：

deg = Math.PI - deg

当鼠标落在第二象限的时候，计算出来的角度应该是180~270度，我们得出：

deg = Math.PI + deg

当鼠标落在第一象限的时候，计算出来的角度应该是270~360度，我们得出：

deg = 2 * Math.PI - deg

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

云服务器 GPU云服务器跟随效果 javascript翻页效果 java与动画效果 javascript 函数

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

转载请注明本文地址：https://www.ucloud.cn/yun/84811.html

滚动视差？CSS 不在话下

摘要：可以感受下种不同取值的不同效果使用实现滚动视差首先，我们使用来实现滚动视差。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应用了这项技术。通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动视差效果方面，也有着不俗...

RobinTang 2019-04-23 13:29 评论0 收藏0
[转]滚动视差？CSS 不在话下/background attachment

摘要：通常而言，滚动视差在前端需要辅助才能实现。当然，其实在实现滚动视差效果方面，也有着不俗的能力。此关键字表示背景相对于视口固定。使用实现滚动视差言归正传，下面介绍另外一种使用实现的滚动视差效果，利用的是。何为滚动视差视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为网页设计的热点趋势，越来越多的网站应...

darry 2019-04-23 13:25 评论0 收藏0
Redux概念之三: Action(动作)与Action Creator(动作创建器)

摘要：那么动作生成器又是什么在程序语言的函数库中，如果是个英文的名词，通常都是代表某种对象或数据格式，例如动作就是个单纯的对象。这两个是Flux架构中的参与成员，Redux中有说明Action的定义: Actions(动作)是从你的应用送往store(存储)的信息负载你可能会一直在Action(动作)这里看到payload这个字词，它是负载或有效数据的意思，这个字词的意思解说你可以看一下...

沈俭 2019-08-20 13:59 评论0 收藏0
正确理解Vuex：懂人生，就懂了Vuex

摘要：人生，远不止是钱。如何管理，一个更复杂的人生人生，就是一个大型应用。把复杂的人间，拆解成了行动与目标。所以，，以及和两个函数，就构成了的逻辑。现在，你不仅完全理解了的设计哲学，你更懂得了如何管理人生。 Veux的哲学，实质上是人生的哲学。看一看这张图。 showImg(https://segmentfault.com/img/remote/1460000018782816?w=424...

URLOS 2019-08-23 16:47 评论0 收藏0
webpack源码分析之三：loader

摘要：本次介绍的则是用来解决这类问题的。实现模块实现思路将配置内的命令的的内联从前至后组成一个数组。所有字符串内部又可以截取，获取完整的。分析并解析该数组内的字符串，获取各个的绝对路径。前言在webpack特性里面，它可以支持将非javaScript文件打包,但前面写到webpack的模块化打包只能应用于含有特定规范的JavaScript文件。本次介绍的loader则是用来解决这类问题的...

laznrbfe 2019-08-26 12:01 评论0 收藏0