0

我有一个无序列表的图片，当我将鼠标悬停在一张图片上时，我希望左边的两张图片淡出，并在它们的位置显示一个 div 和文本。我已经完成了这项工作，除了定位 div - 我试过这个：

div.position({my: 'left top', at: 'left top', of: other_list_item});

但这只是返回 {left: 0, top: 0} 的对象（新位置）。

我也尝试将 div 放在另一个 li 元素中，但仍然不行。这是 div HTML：

<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>Jon Jensen</p><p>Chief Technical Officer</p><p>London, England</p></div>

编辑我正在研究一个 JSFiddle 示例，但是有很多东西要放入，所以当它准备好时，请等待。不管怎样，我忘了提这个有趣的地方：

当我在我试图锚定的元素上单独调用 .position() 时，它会返回正确的偏移量，但是当我尝试在另一个元素上使用 position() 来匹配它们的位置时，什么也没有发生。

4

1 回答 1

0

我不太明白这个问题，但根据我的推理，我知道您正在尝试定位新的 div 来代替淡出的图像，所以这里有一些代码可以适合您的情况

$('div').click(function(){
    //get the positions of the divs to be faded out
    var prev_position = $(this).prev('div').position();
    var next_position = $(this).next('div').position();
    //create and position new divs
    $(this).insertBefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">Replacing DIV</div>');
    $(this).insertAfter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">Replacing DIV</div>');
    //hide the divs
    $(this).prev('div').fadeOut();
    $(this).next('div').fadeOut();
});

有时，如果您的父元素设置了位置，那么 .position() 将获得相对于父元素的位置，并且根据您的需要，这可能会影响您的设计。因此，您可以获取前一个和下一个 div 相对于 WINDOW 的坐标，并且可以得到如下所示的坐标：

    function getPosition($el){
        //get the offset coordinates of the recently clicked link
        var offset = $el.offset();
        var top = offset.top;
        var left = offset.left;
        //get position of this link relative to the window
        var rel_top = top - $(window).scrollTop();
        var rel_left = left - $(window).scrollLeft();
    }
于 2013-07-31T19:39:09.913 回答