Javascript 如果元素落在屏幕外，尝试翻转输出 var$elem=elem； 变量位置=$elem.position（）； var输出={}； var winX=$（window.height（）； var winY=$（window.width（）； output.width=$elem.width（）； output.height=$elem.height（）； output.bottomLeftX=position.left//左上角 output.bottomLeftY=position.top+output.height//左下角 output.bottomRightX=position.left+output.width//右上方 output.bottomRightY=position.top+output.height//右下角 if（position.left>0&&position.top>0&&position.left+output.widthelPos.win\u宽度） { 最终左=左位置设置左-（消息宽度-左位置元素宽度）； } 如果（消息底部>消息高度） { 最终标高=标高标高偏移标高-（标高底部+标高标高高度）； } //$（“#调试”）.append（“final_left=”+final_left）； $msg_elem.css（{“top”：final_top，“left”：final_left}）.show（）； }

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

当前显示隐藏元素的触发元素。使元素的左上边缘接触触发器元素的左下边缘。如果它要离开屏幕，比如触发器元素在靠近页面底部的位置向下，在右边，我希望该元素显示为一条直线，其右下边缘接触触发器元素的右上边缘。或者，如果触发器元素位于页面的左下角，我希望它与触发器元素的左上角对齐。。因此，我需要涵盖寻找边缘和将元素保留在窗口中的基础。目前显示的元素是200px x 550px宽，我不确定这是否能满足上面代码的总体需求

---

如果有什么好方法可以解决这个问题，而不需要给出十几个逻辑来表示，嘿，这将从窗口/视图端口的任何一个边缘脱落，我们需要重新定位它。为了配合

好吧，在这里没有任何帮助，到处玩，头疼，我想出了一个适合我的解决方案。最后，我将上面的部分放进了它自己的函数中，以测量传递的内容的某些方面，然后我创建了一个函数来测量正在显示的元素，并获得其在屏幕上的位置。部分问题在于，由于它被动态添加到dom中，然后样式设置为

display:none

，脚本在实际显示之前无法确定它的位置、内容或放置方式。所以在我显示元素之后，我在它上面运行第二个函数，在需要的时候根据需要移动它

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;

功能提示灯位置（elem）
{
var$elem=elem；
var$msg_elem=$elem.next（'.tippedOff_msg'）；
变量位置=$elem.position（）；
var offset=$elem.offset（）；
var输出={}；
var win_height=$（window.height（）；
var win_width=$（window.width（）；
output.win\u height=win\u height；
output.win\u width=win\u width；
//悬停触发器
output.elem_width=$elem.width（）；
output.elem_height=$elem.height（）；
output.elem\u left\u top=position.left；//左上
output.elem_left_bottom=position.top+output.elem_height；//左下
output.elem\u right\u top=position.left+output.elem\u width；//右上
output.elem_right_bottom=position.top+output.elem_height；//右下
output.elem\u offset\u left=offset.left；
output.elem\u offset\u top=offset.top；
//最终位置（默认）
output.setting_top=output.elem_left_bottom；
output.setting_left=output.elem_left_top；
/*
debugStr=''；
debugStr+='ref='+$elem.data（'ref'）+'
'；
debugStr+='win_height='+win_height+'
'；
debugStr+='win_width='+win_width+'
'；
debugStr+='output.elem_width='+output.elem_width+'
'；
debugStr+='output.elem_height='+output.elem_height+'
'；
debugStr+='output.elem_left_top='+output.elem_left_top+'
'；
debugStr+='output.elem_left_bottom='+output.elem_left_bottom+'
'；
debugStr+='output.elem_right_top='+output.elem_right_top+'
'；
debugStr+='output.elem_right_bottom='+output.elem_right_bottom+'
'；
debugStr+='output.elem_offset_left='+output.elem_offset_left+'
'；
debugStr+=“output.elem_offset_top=”+output.elem_offset_top+”
；
debugStr+='output.setting_top='+output.setting_top+'
'；
debugStr+='output.setting_left='+output.setting_left+'

'；
$（'#debug'）.html（debugStr）；
*/
返回输出；
}
功能TIPPDOFFMSGELEMPOS（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；
//$（“#调试”）.append（“

msg_right_side=”+msg_right_side+”
msg_bottom=“+msg_bottom+”
elPos.elem_right_top=”+elPos.elem_right_top=”；
var final_top=elPos设置_top；
var final_left=elPos.SETING_left；
如果（消息右侧>elPos.win\u宽度）
{
最终左=左位置设置左-（消息宽度-左位置元素宽度）；
}
如果（消息底部>消息高度）
{
最终标高=标高标高偏移标高-（标高底部+标高标高高度）；
}
//$（“#调试”）.append（“
final_left=”+final_left）；
$msg_elem.css（{“top”：final_top，“left”：final_left}）.show（）；
}

这是我的最终结果。。总而言之，我正在尝试为jquery制作一个工具提示插件，我可以根据自己的需要定制它，而且当您第一次使用它时，它不一定需要在元素中使用硬编码消息

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();
}