如何根据屏幕尺寸调整鼠标在div上？

Question

在Quora上，在mouseOvering用户名/图片上，会弹出一张卡片，该卡片始终位于窗口显示区域内。根据屏幕尺寸调整位置。

E.g。在这些Quora screenshots中，第一个图像是屏幕具有更高分辨率，第二个图像是我放大时的图像。悬停卡在第一次出现在右侧，而在第二次出现在左侧。

我怎么能实现这个？

Answer 1

您可以通过查看弹出窗口的左侧和宽度以及屏幕的宽度并比较两者来完成此操作。然后，如果弹出窗口的左侧pos加上弹出窗口的宽度超过屏幕宽度，则将弹出窗口的左侧pos设置为屏幕宽度减去弹出窗口的宽度。合理？一个实现（这恰好是jQuery，但你会得到这个想法......）：

    function adjustPos(menu) {
        var menuHeight = $('#' + menu).outerHeight();
        var bodyHeight = $(window).height();
        if ((menuY + menuHeight) > bodyHeight) {
            menuY = bodyHeight - menuHeight;
        }
        var menuWidth = $('#' + menu).outerWidth();
        var bodyWidth = $(window).width();
        if ((menuX + menuWidth) > bodyWidth) {
            menuX = bodyWidth - menuWidth;
        }
    }

请记住，你也需要为高度做这件事。