Javascript 如何在不同部分触发鼠标移动变量字体？

我想根据我的鼠标移动，用可变字体触发不同的部分

对于第一个部分，一切看起来都很好，但是当我试图触发第二个部分时，它并没有像我预期的那样工作，因为我猜它与第一个部分相连

我需要使该部分以正确的方式独立地工作（要想了解更多信息，请参阅第一部分如何在调试模式下做出反应）

我想知道我必须在Javascript代码中修改什么，才能使我的代码片段能够处理我想要的所有部分，并独立处理它们各自的变量字体交互。有什么想法吗

$（'.square'）。在（'mousemove'，函数（e）上{
var x=e.pageX-$（this）.offset（）.left；
var y=e.pageY；
var$tlSquare=$（'.division--top.division--left'）；
var$trSquare=$（'.division--top.division--right'）；
var$blSquare=$（'.division--bottom.division--left'）；
var$brSquare=$（'.division--bottom.division--right'）；
var squareWidth=$（this）.width（），
squareHeight=$（this）.height（）；
$tlSquare.宽（x）.高（y）；
$trSquare.宽度（squareWidth-x）.高度（y）；
$blSquare.宽度（x）.高度（squareHeight-y）；
$brSquare.width（squareWidth-x）、height（squareHeight-y）；
担架（假）；
});
担架（假）；
$（'.square'）。on（'mouseleave'，function（）{
$（'.division'）。宽度（'50%）。高度（'50%）；
$（'.letter'）.css（'transform'，''）；
担架（假）；
});
功能拉伸器（动画）{
$（'.letter'）。每个（函数（）{
var parentWidth=$（this.parent（）.width（）；
var parentHeight=$（this.parent（）.height（）；
var thisWidth=$（this）.width（）；
var thishheight=$（this）.height（）；
var widthPercent=父宽度/thisWidth；
var heightPercent=父高度/此高度；
变量计时=动画==真？.5:0；
TweenMax.至（$（此），计时{
scaleX：百分比，
斯卡利：高度百分比
})
//$（this.css（'transform'，'scalex（'+widthPercent+'））scaley（'+heightPercent+'））；
});
}

body，
html{
保证金：0；
填充：0；
字体大小：粗体；
字体系列：helvetica；
}
部分{
高度：200px；
背景：蓝色；
颜色：白色；
字号：28px；
}
.包装纸{
显示器：flex；
证明内容：中心；
/*证明内容：柔性端*/
宽度：100%；
高度：100vh；
//背景颜色：蓝色；
溢出：隐藏；
}
.广场{
显示器：flex；
柔性包装：包装；
宽度：100vh；
高度：100vh；
背景色：黑色；
}
.square-2{
显示器：flex；
柔性包装：包装；
宽度：100vh；
高度：100vh；
背景颜色：黄色；
}
.分部{
//显示器：flex；
//对齐项目：居中；
//证明内容：中心；
宽度：50%；
身高：50%；
//背景色：红色；
//边框：1px纯白；
框大小：边框框；
}
.信{
光标：-webkit抓取；
光标：抓取；
}
.信{
显示：内联块；
字体大小：50vh；
保证金：0；
填充：0；
线高：.8；
变换原点：左上角；
颜色：白色；
}
/*.分部：第n名子女（1）{
背景颜色：蓝色；
}
.分部：第n名儿童（2）{
背景色：红色；
}
.分部：第n名儿童（3）{
背景颜色：绿色；
}
.分部：第n名儿童（4）{
背景颜色：橙色；
} */
.圆圈{
宽度：100%；
身高：100%；
边界半径：50%；
边框：1px纯白；
背景颜色：蓝色；
框大小：边框框；
}

第01节
L
A.
s
T
第02节
F
A.
s
T

请参阅工作

您必须更改

y

变量，因为您是使用文档中鼠标位置的偏移顶部进行计算的。这总是比元素大，因此必须提取滚动元素的偏移量顶部，以获得正确的值

var y = e.pageY - $(this).offset().top;

---

您使用

vary=e.pageY进行计算这是文档的高度。您不需要文档的高度，但需要您悬停的正方形的高度。谢谢，@reflon您能用我的小提琴解释一下吗？