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

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

/*声明全局变量*/ var mouseX； var mouseY； var imageOne； var图像二； var图像3； var图像四； var图像5； /*调用初始化函数*/ jquerynit； /*图像需要在加载和调整大小时重新初始化，否则区域将被删除 *每个图像显示的位置都是错误的*/ jQuerywindow.onload，init； jQuerywindow.resizeinit； /*设置mousemove事件调用者*/ jQuerywindow.mousemovegetMousePosition； /*在文档准备就绪、加载和调整大小时调用此函数 *并初始化所有图像*/ 函数初始化{ /*实例化鼠标位置变量*/ mouseX=0； mouseY=0； /*为每个图像实例化HeadImage类*/ imageOne=新的HeadImageone； imageTwo=新的头部imageTwo； imageThree=新的头部imageThree； imageFour=新的头部imageFour； imageFive=新的头部imageFive； } /*此函数在鼠标移动时调用，并获取鼠标位置。 *它还调用HeadImage函数来显示正确的图像*/ 函数getMousePositionevent{ /*设置鼠标位置变量*/ mouseX=event.pageX； mouseY=event.pageY； /*调用HeadImage类的setImageDirection函数 *显示正确的图像*/ imageOne.setImageDirection； imageTwo.setImageDirection； image3.setImageDirection； imageFour.setImageDirection； image5.setImageDirection； } var类名； var-imageTop； 左心室； var图像底部； var影像权； 函数HeadImageclassName{ /*将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.cssz索引，0； ifmouseX>=this.imageLeft&&mouseX this.imageBottom{ jQuery.+this.className+>.down left.cssz索引，1； }否则ifmouseX>=this.imageLeft&&mouseX=this.imageBottom{ jQuery.+this.className+>.down.cssz索引，1； }否则ifmouseX>this.imageRight&&mouseY>this.imageBottom{ jQuery.+this.className+>.down right.cssz索引，1； }else ifmouseX>=this.imageRight&&mouseY>=this.imageTop&&mouseY this.imageRight&&mouseY.up right.cssz索引，1； }否则{ jQuery.+this.className+>.front.cssz索引，1； jQuery.text holder.cssdisplay，无； jQuery.+this.className+.text holder.cssdisplay，block； } }; } 身体{ 背景色：RGB176176176！重要； } 奥帕拉先生{ 位置：固定； 高度：100vh； 宽度：100%； 顶部：0px； } .图像支架{ 位置：相对位置； 左：0px； 高度：100vh； 宽度：100%； } .头部图像{ 位置：绝对位置； 宽度：46%； 左缘：27%； 底部：0px； z指数：0； 身高：； } .前线{ z指数：1； }

---

运行代码段会显示以下线索：错误：{消息：未捕获引用错误：未定义jQuery，文件名：https://stacksnippets.net/js，lineno:62，colno:13}第62行没有任何内容。您忘记加载jQuery=jQuery在wordpress中自动加载。还有其他问题：/