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

Question

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

E.g.在这些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; 
     } 
    } 

请记住，你需要做它的高度为好。