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 回答