1 
var $elem = elem;
var position = $elem.position();
var output = {};
var winX = $(window).height();
var winY = $(window).width();

output.width = $elem.width();
output.height = $elem.height();
output.bottomLeftX = position.left;//left top
output.bottomLeftY = position.top + output.height;//left bottom
output.bottomRightX = position.left + output.width;//right top
output.bottomRightY = position.top + output.height;//right bottom


if(position.left > 0 && position.top > 0 && position.left+output.width < winY && position.top+output.height < winX)
{
    //something
}
else
{
    alert('not gonna fit')
}

return output;

无论我尝试哪种方式，我似乎都无法做到这一点，以上是我来到这里试图获得一些帮助之前的最后一次尝试。我要做的是获取一个元素在 DOM 中的位置，并根据它的位置最终显示另一个元素。有点像工具提示，但在某些方面有所不同。反正。我试图弄清楚如果我需要如何翻转我的输出，以防将要显示的元素离开屏幕，即使它会，我想从不同的方向显示它。 .

当前触发显示隐藏元素的元素。使该元素左上边缘接触触发元素左下边缘。如果它要离开屏幕，例如触发元素在页面底部附近向下并且向右我希望将要显示的元素与其右下边缘接触触发器的右上边缘对齐元素。或者，如果触发元素位于页面的左下角，我希望它与触发元素的左上边缘对齐。基本上我需要覆盖找到边缘并将元素保留在窗口中的基础。目前显示的元素是 200px x 550px 宽，我不确定这是否特别符合上面代码中的整体需求。

任何解决这个问题的好方法，而不用想出十几个逻辑来说嘿，这会从窗口/视口的任何一个边缘掉下来，我们需要重新定位它。匹配

4

1 回答 1

0

好吧，在这里没有任何帮助，并且玩了很多游戏并感到头疼，我想出了一个适合我的解决方案。我最终将上面的部分放入它自己的函数中，以衡量正在传递的某些方面，然后我创建了一个函数来测量正在显示的元素并获得其在屏幕上的位置。部分问题在于，由于它被动态添加到 dom，然后display:none脚本的样式设置无法确定它的放置位置、内容或方式，直到它实际显示。所以在我展示了元素之后，我会在它上面运行第二个函数，以便在需要时根据需要移动它。

function tippedOffElemPosition(elem)
{
    var $elem = elem;
    var $msg_elem = $elem.next('.tippedOff_msg');
    var position = $elem.position();
    var offset = $elem.offset();

    var output = {};
    var win_height = $(window).height();
    var win_width = $(window).width();

    output.win_height = win_height;
    output.win_width = win_width;
    //hover trigger
    output.elem_width = $elem.width();
    output.elem_height = $elem.height();
    output.elem_left_top = position.left;//left top
    output.elem_left_bottom = position.top + output.elem_height;//left bottom
    output.elem_right_top = position.left + output.elem_width;//right top
    output.elem_right_bottom = position.top + output.elem_height;//right bottom
    output.elem_offset_left = offset.left;
    output.elem_offset_top = offset.top;
    //final position (default)
    output.setting_top = output.elem_left_bottom;
    output.setting_left = output.elem_left_top;

/*
    debugStr = '';
    debugStr += 'ref = '+$elem.data('ref')+'<br>';
    debugStr += 'win_height = '+win_height+'<br>';
    debugStr += 'win_width = '+win_width+'<br>';
    debugStr += 'output.elem_width = '+output.elem_width+'<br>';
    debugStr += 'output.elem_height = '+output.elem_height+'<br>';
    debugStr += 'output.elem_left_top = '+output.elem_left_top+'<br>';
    debugStr += 'output.elem_left_bottom = '+output.elem_left_bottom+'<br>';
    debugStr += 'output.elem_right_top = '+output.elem_right_top+'<br>';
    debugStr += 'output.elem_right_bottom = '+output.elem_right_bottom+'<br>';
    debugStr += 'output.elem_offset_left = '+output.elem_offset_left+'<br>';
    debugStr += 'output.elem_offset_top = '+output.elem_offset_top+'<br>';
    debugStr += 'output.setting_top = '+output.setting_top+'<br>';
    debugStr += 'output.setting_left = '+output.setting_left+'<br><br>';
    $('#debug').html(debugStr);
*/

    return output;
}
function tippedOffMsgElemPos(msg_elem, elPos)
{
    $msg_elem = msg_elem;
    var msg_position = $msg_elem.position();
    var msg_offset = $msg_elem.offset();
    var msg_width = $msg_elem.width();
    var msg_height = $msg_elem.height();
    var msg_right_side = msg_offset.left + msg_width;
    var msg_bottom = msg_offset.top + msg_height;
    //$('#debug').append('<br><br>msg_right_side = '+msg_right_side+'<br>msg_bottom = '+msg_bottom+'<br>elPos.elem_right_top ='+elPos.elem_right_top);

    var final_top = elPos.setting_top;
    var final_left = elPos.setting_left;

    if(msg_right_side > elPos.win_width)
    {
        final_left = elPos.setting_left-(msg_width-elPos.elem_width);
    }
    if(msg_bottom > elPos.win_height)
    {
        final_top = elPos.elem_offset_top-(msg_bottom+elPos.elem_height);
    }
    //$('#debug').append('<br>final_left = '+final_left);
    $msg_elem.css({"top":final_top, "left":final_left}).show();
}

是我的最终结果。总而言之，我正在尝试为 jquery 制作一个工具提示插件，我可以根据自己的需要进行定制，并且当你第一次开始时，它不一定需要元素中的硬编码消息。我希望在不久的将来得到的最终结果会更加详尽，但这对我来说已经足够好了。

于 2013-04-18T16:03:56.870 回答