HTML：有什么方法可以确定一个元素是否在另一个元素之后？

我们有一个搜索弹出式应用程序。您搜索一个术语，然后在页面中找到它们，并为该单词添加一个类，然后再突出显示该文本。偶尔，找到的实例位于搜索弹出窗口后面的页面区域中。如果是这样的话，我想调出搜索弹出窗口的不透明度，以便用户可以看到它后面的实例。有没有简单的方法来做到这一点？任何提示或技巧，赞赏。一个要求是搜索后弹出窗口保持打开状态，所以我们不能关闭/隐藏它。HTML：有什么方法可以确定一个元素是否在另一个元素之后？

来源

2011-10-04 Hcabnettek

你可能会提供一些标记吗？ – f0x

你在使用JQuery吗？你可以在结果内容区滚动吗？如果可滚动，用户只需滚动查看所有结果。更重要的是：yopur搜索框的位置是固定的还是绝对的？ –

您可以使用getBoundingClientRect()找到的文本和弹出并比较尺寸。

MSDN
MDNrange，element

您可以在文本直接作用的范围，但它听起来像你有为了应用的亮点包找到的文本元素，所以我只是用那个元素。我想，你可以通过你找到的文本和你的弹出窗口，让此功能测试，如果它们重叠：

function isOverlapping (a, b) 
{ 
    var rectA = a.getBoundingClientRect(); 
    var rectB = b.getBoundingClientRect(); 
    return rectA.top < rectB.bottom && rectA.bottom > rectB.top && 
     rectA.left < rectB.right && rectA.right > rectB.left; 
}

编辑：我必须有太多的时间在我的手上，因为这里有一个有趣的小演示： http://jsfiddle.net/gilly3/qUFLJ/4/

来源

2011-10-04 20:48:06 gilly3

酷东西的人，我知道这是坏的，但我渴望去寻找一种情况，我可以在实时应用程序中实现这一点。 – sg3s

是的，使用JavaScript会很容易。既然你知道弹出窗口是否打开，我假设你知道它是宽度和位置。只需创建一个边界框并检查您的元素是否在此框内。 getBoundingClientRect对此很有用。如果你使用jQuery，。 offset也可以帮助你。

让我知道你是否需要一个例子。

来源

2011-10-04 20:50:31 alexn

HTML：有什么方法可以确定一个元素是否在另一个元素之后？

回答

相关问题