0

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

例如在这些Quora 截图中中，第一张图片是屏幕分辨率更高时的图片，第二张图片是我放大后的图片。悬停卡第一次出现在右侧，但第二次出现在左侧。

我怎么能实现这个？

4

1 回答 1

0

您可以通过查看弹出窗口的左侧位置和宽度以及屏幕的宽度，然后比较两者来做到这一点。然后如果弹出窗口的左位置加上弹出窗口的宽度大于屏幕宽度，则将弹出窗口的左位置设置为屏幕宽度减去弹出窗口的宽度。说得通？一个实现（这恰好是 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;
        }
    }

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

于 2013-04-29T09:23:14.170 回答