0

次のようなDOMがあります

外側ナビ 100% x 100%
ナビ左 100% x 50%
ナビ右 100% x 50%
外側ナビ終了

このコードをそれぞれに追加しました

 $("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
        this.$('image-nav-right').mouseover(function() {
                $(this).bind('mousemove', function(event){
                    $("#prev").hide();
                    $('#next').css({
                       left:  event.pageX,
                       top:   event.pageY,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
                });
        });
        $("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
        this.$('image-nav-left').mouseover(function() {
                $(this).bind('mousemove', function(event){
                    $("#next").hide();
                    $('#prev').css({
                       left:  event.pageX,
                       top:   event.pageY-25,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
                });
        });

すべてのコンテナには絶対位置があり、左のマウスオーバーはうまく機能しますが、右のマウスオーバーは画面の右側から約 800 ピクセル離れて表示されます。理由はわかりませんが、すべてが適切にホバリングされているため、コンソールで確認しました。

pageX と pageY がリセットされていないと思っていましたか? または、右の画像がdivに絶対的に配置されているのではなく、ウィンドウに配置されています..

何か案は？

4

1 に答える 1

0

初めに ..

this.$('image-nav-right')そしてthis.$('image-nav-left')おそらくそうあるべきです

$('.image-nav-right')および$('.image-nav-left')(削除され、クラス セレクターにthis.追加されまし.た)

次に、イベントは本当に必要ありませんmouseover..に直接バインドするだけですmousemove（そうしないと、のイベントハンドラーを複数回バインドし、mousemove物事を台無しにする可能性があります）

だから..もっと好き

$("<img src='/img/next.png' id='next' alt='Next Image' style='display:none;'/>").appendTo(".image-nav .image-nav-right");
        $('.image-nav-right').bind('mousemove', function(event){
                $("#prev").hide();
                $('#next').css({
                   left:  event.pageX,
                   top:   event.pageY,
                   position: "absolute",
                   display:"block",
                   "z-index":"30000"
                   });
        });
$("<img src='/img/prev.png' id='prev' alt='Previous Image' style='display:none;'/>").appendTo(".image-nav .image-nav-left");
        $('.image-nav-left').mousemove(function(event){
                    $("#next").hide();
                    $('#prev').css({
                       left:  event.pageX,
                       top:   event.pageY-25,
                       position: "absolute",
                       display:"block",
                       "z-index":"30000"
                    });
        });
于 2011-06-22T22:04:43.140 に答える