如何根據屏幕大小調整鼠標在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; 
     } 
    } 

請記住，你需要做它的高度爲好。