1

我在绝对位置有 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');
        }
4

1 回答 1

2

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

您需要自行决定衰减的最小和最大距离。当它超出最大距离时，不透明度为 0，在最小值之内，不透明度为 1。对于介于两者之间的任何东西，计算不透明度由(Range - CurrentDistance) / Range.

于 2013-01-24T01:07:52.963 回答