Javascript 根据光标在页面上的位置更改图像

我试图创造这种效果-称为旋转头。它基本上是使用显示器上的光标位置来更改图像。所以我的想法是让我有照片的人跟随光标。问题是，当我使用这段代码时，出现了一些错误，它无法工作。可能有些东西已经过时了

/*声明全局变量*/
var mouseX；
var mouseY；
var imageOne；
var图像二；
var图像3；
var图像四；
var图像5；
/*调用初始化函数*/
jQuery（init）；
/*图像需要在加载和调整大小时重新初始化，否则区域将被删除
*每个图像显示的位置都是错误的*/
jQuery（window）.on（“load”，init）；
jQuery（窗口）。调整大小（初始化）；
/*设置mousemove事件调用者*/
jQuery（window）.mousemove（getMousePosition）；
/*在文档准备就绪、加载和调整大小时调用此函数
*并初始化所有图像*/
函数init（）{
/*实例化鼠标位置变量*/
mouseX=0；
mouseY=0；
/*为每个图像实例化HeadImage类*/
imageOne=新的头部图像（“一”）；
imageTwo=新的头部图像（“two”）；
imageThree=新头部图像（“三”）；
imageFour=新头部图像（“四”）；
imageFive=新头部图像（“五”）；
}
/*此函数在鼠标移动时调用，并获取鼠标位置。
*它还调用HeadImage函数来显示正确的图像*/
函数getMousePosition（事件）{
/*设置鼠标位置变量*/
mouseX=event.pageX；
mouseY=event.pageY；
/*调用HeadImage类的setImageDirection函数
*显示正确的图像*/
setImageDirection（）；
setImageDirection（）；
imageThree.setImageDirection（）；
imageFour.setImageDirection（）；
imageFive.setImageDirection（）；
}
var类名；
var-imageTop；
左心室；
var图像底部；
var影像权；
函数HeadImage（类名称）{
/*将classname的全局实例设置为给定参数*/
this.className=className；
/*计算图像的边界*/
this.imageLeft=jQuery（“.”+this.className+“>.head image”）.offset（）.left；
this.imageRight=this.imageLeft+jQuery（“.”+this.className+“>.head image”）.width（）；
this.imageTop=jQuery（“.”+this.className+“>.head image”）.offset（）.top；
this.imageBottom=this.imageTop+jQuery（“.”+this.className+“>.head image”）.height（）；
/*此函数用于确定鼠标指针相对于图像的位置
*并相应地显示正确的图像*/
this.setImageDirection=函数（）{
jQuery（“.”+this.className+“>.head image”）.css（“z-index”，“0”）；
if（mouseX>=this.imageLeft&&mouseX this.imageBottom）{
jQuery（“.”+this.className+“>.down left”）.css（“z-index”，“1”）；
}else if（mouseX>=this.imageLeft&&mouseX=this.imageBottom）{
jQuery（“.”+this.className+“>.down”）.css（“z-index”，“1”）；
}else if（mouseX>this.imageRight&&mouseY>this.imageBottom）{
jQuery（“.”+this.className+“>.down right”）.css（“z-index”，“1”）；
}如果（mouseX>=this.imageRight&&mouseY>=this.imageTop&&mouseY this.imageRight&&mouseY.up right”）.css（“z-index”，“1”）；
}否则{
jQuery（“.”+this.className+“>.front”）.css（“z-index”，“1”）；
jQuery（“.text holder”）.css（“显示”、“无”）；
jQuery（“.”+this.className+“.text holder”）.css（“显示”、“块”）；
}
};
}

正文{
背景色：rgb（176176）！重要；
}
奥帕拉先生{
位置：固定；
高度：100vh；
宽度：100%；
顶部：0px；
}
.图像支架{
位置：相对位置；
左：0px；
高度：100vh；
宽度：100%；
}
.头部图像{
位置：绝对位置；
宽度：46%；
左缘：27%；
底部：0px；
z指数：0；
身高：；
}
.前线{
z指数：1；
}

您正在导入jquery吗？我正在使用这段代码，这段代码是在我的网站上加载jquery并运行的。但是当我把它放在WordPress上（默认情况下加载jQuery）时，它会导致一些问题，一些函数停止工作，有时甚至头部也不工作。我看到旋转头在这里也不起作用。@аааааааК。将jquery添加到您的代码段后，它可以正常工作。是的，当您将其添加到代码段时，它可以正常工作，但当添加到WordPress时，它可以完全停止工作。可能是因为它被加载了两次？@БааааааК。可能jquery是在这个脚本之后加载的。检查您的控制台是否有错误，并告诉我们您发现了什么