更改字体大小时出现性能问题

Question

我已经把这段代码放在一起了，但我在掌握它时遇到了问题。我想让单个文本行在你用光标靠近它们时单独增长。靠近的线是最大的，离得更远的线是更小的。我有点工作，但不提及性能问题并不是理想的效果。它运行不顺利。有没有优化代码的方法？

(function() {
jQuery(document).mousemove(function(e) {
jQuery(".post__text__content").each( function() {
$element  = jQuery(".post__text__content");
mY = e.pageY;
mX = e.pageX;
distance = calculateDistance($element, mX, mY);
fontsize = 80 - distance / 10 ;
jQuery(this).css("font-size", fontsize)
})
});
function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2)));
}
})();

Answer 1

类似乎是最好的选择。工作平稳，具有预期效果。

我对它做了一些更改，并在主元素和它旁边的元素中添加了类

(function() {

jQuery(".post__text__content").hover(
function () {
jQuery(this).prev().addClass("sub_text");
jQuery(this).addClass("main_text");
jQuery(this).next().addClass("sub_text");
},
function () {
jQuery(this).prev().removeClass("sub_text");
jQuery(this).removeClass("main_text");
jQuery(this).next().removeClass("sub_text");
}
);
})();

这是一支工作笔：https://codepen.io/tads_r/pen/WNpKRKw