在很多网站上都可以看到图片跟随鼠标移动的JS特效。其实方法很简单。这篇文章介绍了很多javascript鼠标跟随动作，在这里和大家分享一下。
除了直线运动和曲线运动，还有另一种运动形式：鼠标随动，需要三角函数或比例运算。本文将用几个小例子介绍角运动的相关内容。
眼球转动
在很多网页中，都有跟随运动，比如眼球运动。当鼠标在网页中移动时，眼球也会向相应的方向移动。
以上是眼球旋转示意图，(x0，y0)是眼球的位置，(x，y)是鼠标的位置。设直线与垂直方向的夹角为A，中心点坐标为(0，0)，可以得到如下公式
tan(a)=x/y=x0/y0
x0=r*sin(a)
y0=r*cos(a)
在mousemove事件中，可以很容易地得到鼠标位置(x，y)，从中可以得到夹角A，进而可以得到眼球位置。
将左眼设为ball1，右眼设为ball2。左眼中心坐标为(39，72)，右眼中心坐标为(106，68)，眼球移动半径为12px。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题文档/标题
风格
# test {位置：绝对；top:100px；左：200px}
# ball1 {位置：绝对；top:62px；左：28px}
# ball2 {位置：绝对；顶配：58px左：96px}
/风格
/头
身体
div id='test '
img src='head.png' alt='body '
img id=' ball 1 ' src=' ball . png ' alt=' ball '
img id=' ball 2 ' src=' ball . png ' alt=' ball '
/div
脚本
//声明头部的默认偏移量
var offset left=test . offset left；
var offsetTop=test.offsetTop
//声明左眼角度a1和右眼角度a2
var a1，a2；
//声明左眼的中心(X1，Y1)和右眼的中心(X2，Y2)
var X1=38，Y1=72，X2=106，Y2=68
//声明半径
var R=12
document . onmousemove=function(e){
e=e ||事件；
//获取鼠标坐标
var x=e.clientX
var y=e.clientY。
//更新夹角a1，a2
a1=Math.atan2(x-X1-offsetLeft，y-Y1-offset top)；
a2=Math.atan2(x-X2-offsetLeft，y-Y2-offset top)；
//更新左右眼的左值和上值
ball 1 . style . left=R * math . sin(a1)X1-10 ' px '；
ball 1 . style . top=R * math . cos(a1)Y1-10 ' px '；
ball 2 . style . left=R * math . sin(a2)X2-10 ' px '；
ball 2 . style . top=R * math . cos(a2)Y2-10 ' px '；
}
/脚本
/body
/html
苹果菜单
苹果的菜单里有鼠标跟随运动。距离鼠标越近，菜单项的宽度和高度越大，距离越远，菜单项的宽度和高度越小。
鼠标坐标可以由clientX和clientY在mousemove事件中获取。菜单项的坐标实际上是已知项。鼠标坐标与菜单项之间的距离就是所需距离，该距离与菜单项的宽度和高度成反比。
[注意]不能命名元素X的自定义属性，因为X已经被浏览器使用。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题文档/标题
风格
正文{边距：0；}
# test {位置：绝对；底部：0；宽度：100%；文本对齐：居中；}
img { width:64px；身高：64px}
/风格
/头
身体
div id='test '
img id='img1' src='img/1.png '
img src='img/2.png '
img src='img/3.png '
img src='img/4.png '
img src='img/5.png '
/div
脚本
//声明菜单项的宽度和高度值
var offsetWidth=img 1 . offsetWidth；
var offset height=img 1 . offset height；
//声明外部框的左值和上值
var offset left=test . offset left；
var offsetTop=test.offsetTop
//获取菜单项
var imgs=test . getelementsbytagname(' img ')；
document . onmousemove=function(e){
e=e ||事件；
//更新鼠标位置
var x=e.clientX
var y=e.clientY。
for(var I=0；i imgs.lengthi ){
//获取菜单项的坐标
imgs[i].x0=imgs[i]。offsetLeft offsetLeft imgs[i].offsetWidth/2；
imgs[i].y0=imgs[i].offsetTop offsetTop imgs[i]。offset height/2；
//更新鼠标和菜单项之间的距离
imgs[i]。len=math . sqrt((x-imgs[I]. x0)*(x-imgs[I]. x0)(y-imgs[I]. y0)*(y-imgs[I]. y0))；
//限制范围
if(imgs[i].镜头150)
imgs[i]。len=150
}
//更新菜单项的宽度和高度
imgs[i].style.width=(1-imgs[i].len/300)* 2 * offsetWidth ' px '；
imgs[I]. style . height=(1-imgs[I].len/300)* 2 *偏高' px '；
}
}
/脚本
/body
/html
跟着方向走
很多网页都有跟着指示走的效果。鼠标从哪个方向移动，元素就从哪个方向移动。鼠标往哪个方向移出，同理，元素往哪个方向移出。
以匀速直线移动可以达到移进移出的移动效果。这里主要是要判断方向。
如示意图所示，正方形的元素可分为八个部分(右上、左上、左上、左下、右下、左下、右上、右下)。每个部分都是等腰直角三角形。当元素进入某个区域时，水平线前面的方向表示元素的方向。
假设正方形的中心坐标为(x0，y0)，移动元素(move)的坐标为(x，y)，将这两个坐标组成的直线与水平正方向的直线所成的角度作为参考角度，假设为A，通过确定角度A的范围就可以确定移动元素(move)的方向。
-45a45，进入方向是对的。
在45a135处，入口方向向上。
在a135或a-135，入口方向为左侧。
在-135a-45处，入口方向向下。
在确定了动态元素(move)进入的方向后，需要根据方向将动态元素(move)瞬间变换到相应的位置。然后，动态元素(move)匀速直线运动，最后停在与静态元素(test)重合的位置。
当动态元素(move)移出静态元素(test)的范围时，需要注意的是，静态元素(test)的mouseout事件不会被触发。因为，这个时候，鼠标一直在动态元素上(move)。因此，动态元素(move)的mouseout事件被触发。
！文档类型html
html lang='en '
头
meta charset='UTF-8 '
标题文档/标题
风格
# box { overflow:hidden；位置：相对；左：100pxtop:100px；高度：100px宽度：300px}。测试{宽度：100px高度：100px位置：绝对；字体：20px/100px '？'；文本对齐：居中；}
/风格
/头
身体
div id='box '
div class=' test ' style=' top:0px；左：0px'背景色：粉色；'1/格
div class=' test ' style=' top:0px；左：100px'背景色：浅珊瑚色；'2/格
div class=' test ' style=' top:0px；左：200px'背景色：浅绿色；'3/格
div id=' move ' style=' width:100px；高度：100px背景色：浅蓝色；位置：绝对；top:-100px；左：-100像素；'/div
/div
脚本
var tests=box . getelementsbytagname(' div ')；
for(var I=0；一.测试长度；i ){
测试[i]。onmouseover=fn
}
//当鼠标移出动态元素(move)时，将fn()函数放在所有静态元素上。
move.onmouseout=fn
函数fn(e){
e=e ||事件；
//停止冒泡
如果(例如停止传播){
e .停止传播()；
}否则{
e.cancelBubble=true
}
for(var I=0；一.测试长度；i ){
测试[i]。onmouseover=fn
}
var _ this=this
//当鼠标移入动态元素(move)时，静态元素上的mouseover事件设置为null。
move.onmouseover=function(){
move . innerhtml=_ this . innerhtml；
_ this.onmouseover=null
}
//声明坐标
var x=e.clientX
var y=e.clientY。
//声明静态元素(test)左上角的坐标(相对于父元素)
var x11=this.offsetLeft
var y11=this.offsetTop
//声明静态元素(test)中心点的坐标(相对于父元素)
var X10=X11 this.offsetWidth/2;
var y10=y11 this.offsetHeight/2;
//声明静态元素(test)左上角的坐标(相对于文档)
var x21=this . parent node . offset left X11；
var y21=this . parent node . offsettop y11；
//声明静态元素(test)中心点的坐标(相对于文档)
var x20=x21 this.offsetWidth/2;
var y20=y21 this.offsetHeight/2;
//声明静态元素的宽度和高度
var height=this.offsetHeight
var width=this.offsetWidth
//声明并计算夹角
var a=Math.atan2(y20-y，x-x20)*180/Math。PI；
//声明并计算方向
var dir
如果(a -45 a 45){
dir=' right
}else if(a 45 a 135){
dir=' top
}else if(a -135 a 45){
dir=' bottom
}否则{
dir=' left
}
//当鼠标移入时
if(例如，type=='mouseover'){
//更新动态元素（移动)的初始位置
//移动动态元素（移动)直到完全覆盖静态元素（测试)
if(dir=='right'){
move.style.left=x10宽度/2“px”；
动起来。风格。top=y10-height/2 ' px '；
fnMove(移动，'左x11)
}else if(dir=='top'){
动起来。风格。left=X10-width/2 ' px '；
动起来。风格。top=y10-height/2-height ' px '；
fnMove(移动，'顶部，y11)
}else if(dir=='left'){
move.style.left=x10宽度/2宽度px’；
动起来。风格。top=y10-height/2 ' px '；
fnMove(移动，'左x11)
}否则{
动起来。风格。left=X10-width/2 ' px '；
动起来。风格。top=y10-height/2 height ' px '；
fnMove(移动，'顶部，y11)
}
}
如果(例如，type=='mouseout'){
//鼠标移出时
if(dir=='right'){
fnMove(移动，'左，x11宽度);
}else if(dir=='top'){
fnMove(移动，'顶部，y11 -高度);
}else if(dir=='left'){
fnMove(移动，'左，x11 -宽度);
}否则{
fnMove(移动，'顶，y11高度);
}
}
}
函数getCSS(obj，style){
if(window.getComputedStyle){
返回getComputedStyle(obj)[style]；
}
返回对象。当前样式[样式]；
}
函数fnMove(obj，attr，target){
var H=obj.offsetHeight
if(对象计时器)返回；
var cur=parseFloat(getCSS(obj，attr))；
如果(目标电流){
定义变量步长=H/4；
}否则{
定义变量步长=-H/4；
}
obj。timer=setInterval(function(){
cur=parseFloat(getCSS(obj，attr))；
当前=当前步长；
if((cur -target) * step=0){
cur=目标；
}
obj。style[attr]=cur ' px '；
if(cur==target){
清除间隔(对象。定时器)；
obj。定时器=0；
}
},20);
}
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。