Javascript 如何根据鼠标位置触发可变字体？

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

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

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

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

  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.width(x).height(y);
  $trSquare.width(squareWidth - x).height(y);
  $blSquare.width(x).height(squareHeight - y);
  $brSquare.width(squareWidth - x).height(squareHeight - y);

  stretchLetter(false);
});


stretchLetter(false);

$('.square').on('mouseleave', function() {
  $('.division').width('50%').height('50%');
  $('.letter').css('transform', '');
  stretchLetter(false);
});

function stretchLetter(animation) {
  $('.letter').each(function() {
    var parentWidth = $(this).parent().width();
    var parentHeight = $(this).parent().height();
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var widthPercent = parentWidth / thisWidth;
    var heightPercent = parentHeight / thisHeight;
    var timing = animation == true ? .5 : 0;

    TweenMax.to($(this), timing, {
      scaleX: widthPercent,
      scaleY: heightPercent
    })
    //$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
  });
}

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

---

更新了代码段以处理单个块。我希望这会有帮助

var$=jQuery
$（'.square'）。on（'mousemove'，函数（e）{
var x=e.pageX-$（this）.offset（）.left；
var y=e.pageY；
var$tlSquare=$（this.find（'.division--top.division--left'）；
var$trSquare=$（this.find（'.division--top.division--right'）；
var$blSquare=$（this.find（'.division--bottom.division--left'）；
var$brSquare=$（this.find（'.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）；
const childrens=$（this.childrens（）.childrens（）；
担架（假，儿童）；
});
/*担架（假）*/
$（'.square'）。on（'mouseleave'，function（）{
const child=$（this.children（）；
child.each（函数（）{
$（此）.width（'50%'）。height（'50%'）；
})
child.children（）.each（函数（））{
$（this.css（'transform'，''）；
})
const childrens=$（this.childrens（）.childrens（）；
担架（假，儿童）；
});
功能拉伸器（动画，el）{
el.每个（函数（）{
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+'））；
});
}
$（文档）.ready（函数（）{
常数el=$（“.square”）
.儿童（）
.儿童（）；
担架（假，el）；
});
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
非常感谢，但不幸的是，仍然存在一些问题。您知道为什么更新代码后初始位置显示不正确吗？字母间距看起来不同，但当鼠标输入时，文本再次正确显示
第二节问题仍然是同一个问题，变量字体没有正确显示，也没有像第一节那样做出反应。这只是一个解决办法。您可以添加预期的和初始的图像吗。这里是ePect的外观[]，这里是鼠标输入[]@CATT之前的首字母。很抱歉，回复太晚，问题出在您的代码中，您在加载文档时运行代码，但我没有运行它。问题现在已经解决，您现在可以检查更新的代码段。只需添加
$（document）.ready（函数（）{const el=$（“.square”）.children（）.children（）；stretchLetter（false，el）；}）到脚本末尾。
body,
html {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: helvetica;
}

section {
  height: 200px;
  background: blue;
  color: white;
  font-size: 28px;
}

.wrapper {
  display: flex;
  justify-content: center;
  /*justify-content: flex-end;*/
  width: 100%;
  height: 100vh;
  //background-color: blue;
  overflow: hidden;
}

.square {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: black;
}

.square-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: yellow;
}

.division {
  //display: flex;
  //align-items: center;
  //justify-content: center;
  width: 50%;
  height: 50%;
  //background-color: red;
  //border: 1px solid white;
  box-sizing: border-box;
}

.letter {
  cursor: -webkit-grab;
  cursor: grab;
}

.letter {
  display: inline-block;
  font-size: 50vh;
  margin: 0;
  padding: 0;
  line-height: .8;
  transform-origin: top left;
  color: white;
}


/* .division:nth-child(1){
    background-color: blue;
}
.division:nth-child(2){
    background-color: red;
}
.division:nth-child(3){
    background-color: green;
}
.division:nth-child(4){
    background-color: orange;
} */

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}

<section>SECTION-01</section>
<main>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">L</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
  <section>SECTION-02</section>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">F</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>