jquery - onmouseover 显示 div 调整 x 和 y

Question

我的页面中有几张小图片，鼠标悬停时我在图片旁边显示了一个 div。到目前为止，一切都很好。但是，当图像位于页面底部时，我想将 div 显示在图像下方而不是图像上方。基本上我要做的是验证图像的位置，如果靠近底部，我会在图像上方显示 div。如果图像靠近右边距以在左侧显示 div，则同样如此。

有人知道实现此目标的任何简单方法吗？

干杯

Answer 1

在没有看到您的任何代码的情况下，很难提出“正确”的方法，但我会尝试以下方法(使用 JQuery 语法):

首先，计算您的“阈值”——无论您希望 div 出现在下方的最低点是多少。可能最简单的方法是使用 $(document).height() 并减去 X 像素。

然后，在鼠标悬停时，计算图像在页面上的位置。您可以使用 .offset(); 执行此操作。

如果图片顶部高于阈值，则显示下方的div，否则显示上方的div。

注意:根据您的页面设置方式，您可以计算每个加载时的位置，然后将一个类应用到低于阈值的那些，并使用它来定位相应的 div正确。