jquery - onmouseover 显示 div 调整 x 和 y

Question

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

有谁知道实现这一目标的任何简单方法？

干杯

Answer 1

Without seeing any of your code, it's a bit hard to suggest the "right" way to do it, but I'd try the following method (using JQuery syntax):

First, calculate your 'threshold' - whatever is the lowest point you want the div to appear underneath. Probably the easiest way to do this is with $(document).height() and subtract X pixels.

Then, on hover, calculate where the image is on the page. You can do this with .offset();.

If the top of the image is higher than the threshold, show the div below, otherwise show the div above.

Note: Depending on how your page is set up you could calculate the positions of each one on load and then apply a class to the ones below the threshold, and use that to position the corresponding div correctly.