Javaｓｃｒｉｐｔ鼠标遵循3个效果（眼球效应，Apple菜单，方向跟随）

除了线性运动和曲线运动的两种形式外，还有另一种运动形式，即鼠标跟随运动。这种跟随运动需要三角函数或比例运算的相关内容。本文将介绍几个例子的角度运动的相关内容。
眼球旋转
在许多页面中，有如下运动，如眼球转动，当鼠标在一个网页上移动时，眼睛也会朝同一个方向移动。
以上是眼睛转动的示意图。（x0，y0）是眼球的位置（x，y），并且是鼠标的位置。直线和垂直方向之间的角度是，如果中心点的坐标是（0,0），可以得到下面的公式。
Tan（一）= X / Y = x0和y0

x0 = R *罪（一）

y0 = R * cos（一）
在MouseMove事件，很容易得到鼠标位置（x，y），从而找到角，然后找到眼球的位置。
左眼和右眼ball1，算。中心坐标的左眼睛（39,72）。中心坐标的右眼是（106,68），和眼球的半径可以感动12px
文件

#测试{位置：绝对；顶部：100px；左：200px；}
# ball1 {位置：绝对；顶部：62px；左：28px；}
#算{位置：绝对；顶部：58px；左：96px；}

默认偏移头语句
无功offsetleft = test.offsetleft；
无功offsettop = test.offsettop；
左眼，右眼/陈述角A1角A2
变量A1；
/ /声明（x1，y1）的左眼右眼的中心，中心（x2，y2）
VaR X1 = 38，Y1 = 72，X2 = 106，Y2 = 68；
语句半径
var r＝12；
document.onmousemove =功能（e）{
E = E事件| |；
获取鼠标坐标
X = e.clientx VaR；
var y = e.clienty；
更新角度
A1 = math.atan2（x-x1-offsetleft，y-y1-offsettop）；
A2 = math.atan2（x-x2-offsetleft，y-y2-offsettop）；
左眼，右眼/更新左，最高值
ball1.style.left = R * Math.sin（A1）+ X1 - 10 + 'px；
ball1.style.top = R * Math.cos（A1）+ Y1 - 10 + 'px；
ball2.style.left = R * Math.sin（A2）+ X2 10 + 'px；
ball2.style.top = R * Math.cos（A2）+ y2 - 10 + 'px；
}

苹果菜单
鼠标跟随器也存在于Apple菜单中。菜单项宽度越大，鼠标距离越近，宽度越宽，宽度越小。
鼠标的坐标可以通过在MouseMove事件ClientX和clienty获得。该菜单项的坐标是一个已知的项目。鼠标坐标和菜单项之间的距离所需要的距离，而距离是该菜单项的宽度成反比。
{无法将元素的自定义属性命名为x，因为浏览器已经使用了X。
文件

身体{边缘：0；}
#测试{位置：绝对的；下：0；宽度：100%；文本对齐：中心；}
img {宽度：64px；身高：64px；}
语句/菜单项宽度值
无功offsetwidth = img1.offsetwidth；
无功offsetheight = img1.offsetheight；
外箱左/语句和顶值
无功offsetleft = test.offsetleft；
无功offsettop = test.offsettop；
获取菜单项
VaR IMGS = test.getelementsbytagname（'img）；
document.onmousemove =功能（e）{
E = E事件| |；
更新鼠标位置
X = e.clientx VaR；
var y = e.clienty；
对于（var i = 0；i < imgs.length；i++）{
获取菜单项的坐标
IMGS {我}，x0 = IMGS {我}。offsetleft + offsetleft + IMGS {我}。offsetwidth / 2；
IMGS {我}。y0 = IMGS {我}。offsettop + offsettop + IMGS {我}。offsetheight / 2；
来自更新的鼠标和菜单项
IMGS {我}，len = Math.sqrt（（x-imgs {我}，x0）*（x-imgs {我}，x0）+（y-imgs {我}，y0）*（y-imgs {我}，y0））；
限制
如果（IMGS {我}。Len > 150）{
IMGS {我} len = 150；
}
更新菜单项宽度
IMGS {我}。style.width =（1-imgs {我}。Len / 300）* 2 * offsetwidth + 'px；
IMGS {我}。style.height =（1-imgs {我}。Len / 300）* 2 * offsetheight + 'px；

}
}

方向如下
有许多网页具有方向跟随的效果，在哪个方向移动鼠标，元素从哪个方向移动，鼠标朝哪个方向移动，同样地，元素被移向哪个方向。
移动效果以匀速直线运动，主方向要判断。
图中所示的示意图，你可以把一个正方形元素放入（右、左、左、左、右、左、右、右）这8个部分，每个部分都是等腰三角形，当元素进入一个区域时，该线在前面的方向是所说的元素的方向。

假设中心广场为坐标（x0，y0），动态元素（移动）的坐标为（x，y），水平直线的两坐标的线角的正方向作为参考角度，假设，通过确定一个角度范围，可以确定动态元素（移动）为方向

当- 45 < < 45，条目的方向是正确的

当45 < < 135 >时，进入的方向是上升的。

当A > 135或< 135 >时，左边的条目方向。

当- 135 < < - 45，条目的方向是较低的。
在确定动态元件（移动）的输入方向后，动态元件（运动）需要根据方向瞬间改变到相应的位置，然后动态元件（运动）以匀速运动，最终在静止元件（测试）的重合位置停止。
当一个动态元件（移动）移动的静态元素的范围（测试），需要注意的是，一个静态元素mouseout事件重要（测试）是不触发的。因为，在这一点上，鼠标一直在动态元件（移动），是引发动态元件的mouseout事件（移动）
文件

#箱{溢出：隐藏；位置：相对；左：100px；顶部：100px；身高：100px；宽度：300px；}
。测试{宽度：100px；身高：100px；位置：绝对的；字体：20px / 100px歌体；文本对齐：中心；}

一
二
三
VaR测试= box.getelementsbytagname（'div）；
对于（var i = 0；i < tests.length；i++）{
试验{我} onmouseover = FN；
}
在所有静态元素中，鼠标从动态元素（移动）中移动，然后是FN（）函数。
move.onmouseout = FN；
函数FN（e）{
E = E事件| |；
停止/冒泡
如果（e.stoppropagation）{
e.stoppropagation（）；
其他{ }
e.cancelbubble =真；
}
对于（var i = 0；i < tests.length；i++）{
试验{我} onmouseover = FN；
}
无功_this =这；
/ /鼠标动态元素（移动），在空荡荡的静态元素的mouseover事件
move.onmouseover =函数（）{
move.innerhtml = _this.innerhtml；
_this.onmouseover = null；
}
坐标/语句
var x = e.clientx；
var y = e.clienty；
语句左上角的静态元素（测试）坐标（相对于父元素）
VaR的X11 = this.offsetleft；
VaR Y11 = this.offsettop；
语句静态元素（测试）中心坐标（相对于父元素）
VaR X10 = X11 +这offsetwidth / 2；
VaR Y10 = Y11 +这offsetheight / 2；
语句/静态元素（测试）（相对于文档的左上角）
VaR X21 = this.parentnode.offsetleft + X11；
VaR Y21 = this.parentnode.offsettop + Y11；
语句/静态元素（测试）中心坐标（相对于文档）
VaR X20 = X21 +这offsetwidth / 2；
VaR Y20 = Y21 +这offsetheight / 2；
语句/静态元素宽度和高度
VaR高度= this.offsetheight；
VaR的宽度= this.offsetwidth；
语句并计算角度
创建一个math.atan2（y20-y，x-x20）* 180 / Math.PI；
语句并计算方向
var目录；
如果（a - 45 A＜45）{
DIR =左；
}如果（a＞45 a < 135）{
DIR = ' '；
}如果（45–135）{
DIR =底部的；
其他{ }
DIR =右；
}
当鼠标移动时。
如果（e.type = = 'mouseover）{
在初始位置更新动态元素（移动）
移动动态元素（移动）直到完全覆盖静态元素（测试）为止。
如果（DIR = =左）{
move.style.left = X10 +宽/ 2 + 'px；
move.style.top = Y10高度 / 2 + 'px；
fnmove（移动，右，X11）
} else if（DIR = = ' '）{
move.style.left = X10的宽度 / 2 + 'px；
move.style.top = Y10高度 / 2高度+ 'px；
fnmove（移动，' '，Y11）
} else if（DIR = =右）{
move.style.left = X10的宽度 / 2宽+ 'px；
move.style.top = Y10高度 / 2 + 'px；
fnmove（移动，右，X11）
其他{ }
move.style.left = X10的宽度 / 2 + 'px；
move.style.top = Y10高度 / 2 +高度+ 'px；
fnmove（移动，' '，Y11）
}
}
如果（e.type = = 'mouseout）{
当鼠标退出/
如果（DIR = =左）{
fnmove（移动，右，X11 +宽度）；
} else if（DIR = = ' '）{
fnmove（移动，' '，Y11的高度）；
} else if（DIR = =右）{
fnmove（移动，右，X11的宽度）；
其他{ }
fnmove（移动，' '，Y11 +高）；
}
}
}
功能getcss（obj，风格）{
如果（窗口。getcomputedstyle）{
返回getcomputedstyle（obj）{风格}；
}
返回的对象。currentstyle {风格}；
}
功能fnmove（obj，属性，目标）{
var H = obj.offsetheight；
如果（obj。定时器）返回；
无功电流= parseFloat（getcss（obj，ATTR））；
如果（目标>当前）{
var步骤4；
其他{ }
var步骤4；
}
obj.timer = setInterval（）{（）函数（
电流= parseFloat（getcss（obj，ATTR））；
当前步骤；
如果（（当前目标）*步骤> = 0）{
当前目标；
}
obj。风格{属性} =电流+ 'px；
如果（当前=目标）{
ClearInterval（obj。定时器）；
obj.timer = 0；
}
}，20）；
}

以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。