Javascript 如何根据鼠标移动/位置应用效果？

我有3个按钮处于绝对位置：

.micro {
position:absolute;
}

#micro_1 {
left:1165px;
top:176px;
}

#micro_2 {
left:800px;
top:300px;
}

#micro_3 {
left:300px;
top:400px;
}

当鼠标移动并靠近其中一张图片时，我想淡出这3个元素。 如果鼠标靠近图像1，则图像1正在淡入。图像2和图像3正在淡出。 等等

我可以使用jQuery了解鼠标位置：

$('body').mousemove(function(e){
    $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);

所以我想我可以做一些数学来应用这个效果

我所做的：

$('body').mousemove(function(e){
        $('#mouse_position').html("mouse position: x=" + e.pageX + "; y=" + e.pageY);
        if (e.pageX > 394 && e.pageX < 533) {
            $('#lueur_video_1').fadeIn('slow');
            $('#lueur_video_2').fadeOut('slow');
            $('#lueur_video_3').fadeOut('slow');
        }

        if (e.pageX > 533 && e.pageX < 722) {
            $('#lueur_video_2').fadeIn('slow');
            $('#lueur_video_1').fadeOut('slow');
            $('#lueur_video_3').fadeOut('slow');
        }

        if (e.pageX > 722 && e.pageX < 1116) {
            $('#lueur_video_3').fadeIn('slow');
            $('#lueur_video_1').fadeOut('slow');
            $('#lueur_video_2').fadeOut('slow');
        }

$（'body'）.mousemove（函数（e）{
$（'#鼠标位置'）.html（“鼠标位置：x=“+e.pageX+”；y=“+e.pageY”）；
如果（e.pageX>394&&e.pageX<533）{
$（'lueur#u video_1'）。fadeIn（'slow'）；
$（'lueur#u video_2'）。淡出（'slow'）；
$（'lueur#u video_3'）。淡出（'slow'）；
}
如果（e.pageX>533&&e.pageX<722）{
$（'lueur#u video_2'）。fadeIn（'slow'）；
$（'lueur#u video_1'）。淡出（'slow'）；
$（'lueur#u video_3'）。淡出（'slow'）；
}
如果（e.pageX>722&&e.pageX<1116）{
$（'lueur#u video_3'）。fadeIn（'slow'）；
$（'lueur#u video_1'）。淡出（'slow'）；
$（'lueur#u video_2'）。淡出（'slow'）；
}

您可以将鼠标位置（e.pageX/e.pageY）与图像中心进行比较，并在此基础上设置不透明度。您可以使用

$（“#micro_3”）.offset（）检查元素在页面上的位置。

---

您需要自行决定淡入淡出的最小距离和最大距离。超出最大距离时，不透明度为0，在最小距离内，不透明度为1。对于介于两者之间的任何内容，请通过

（范围-CurrentDistance）计算不透明度/Range

谢谢你的建议。我正在尝试你的解决方案，这显然更精确。我编辑了我的问题，以展示我的尝试（非常基本，但效果很好）@SébastienGicquel你很接近，但如果你也想使用

pageY

，你不能只使用

pageX

。一位名叫毕达哥拉斯的伟人创造了一个定理，根据两点形成的直角计算两点之间的距离。此外，使用

.css（'opacity'））

fadeIn

/

fadeOut

设置动画，因此它们将持续设置动画，因为

mousemove

以如此高的频率触发。如果您想要动画，请尝试在不透明度上使用CSS转换。您能创建一个到目前为止在jsfiddle.net上的工作版本吗？@看到这把小提琴了吗：它是r非常基本。