1

私は絶対位置に3つのボタンを持っています:

.micro {
position:absolute;
}

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

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

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

マウスが移動して画像の1つに近づくと、これら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 に答える