如何根据屏幕大小调整鼠标悬停在div上？

Question

在Quora上，在mouseOvering上显示用户名/图片时，会弹出一张始终位于窗口显示区域内的卡片。它的位置会根据屏幕大小进行调整。

例如，在这些Quora screenshots中，第一张图像是当屏幕具有较高分辨率时，第二张图像是当我放大时。悬停卡片第一次出现在右边，但在第二次出现在左边。

我怎么才能实现它呢？

Answer 1

您可以通过查看弹出窗口的左侧位置和宽度以及屏幕的宽度来完成此操作，并对两者进行比较。然后，如果弹出窗口的左侧位置加上弹出窗口的宽度大于屏幕宽度，则将弹出窗口的左侧位置设置为屏幕宽度减去弹出窗口的宽度。讲得通?一个实现(这恰好是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;
        }
    }

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