Question

我有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');
        }

Answer 1

您可以将鼠标位置（e.pageX / e.pageY）与图像中心进行比较，并根据该位置设置不透明度。您可以使用$("#micro_3").offset()检查网页上元素的位置。

您需要自行决定淡入淡出的最小和最大距离。当它超出最大距离时，不透明度为0且在最小值内，不透明度为1.对于中间的任何内容，通过(Range - CurrentDistance) / Range计算不透明度。

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

1 个答案: