检测Html元素是否与另一个Html元素重叠 [英] Detecting if Html element is overlapping another Html element

问题描述

在jQuery或Javascript中，如何检测img标签是否与另一个img标签重叠？

可以通过查找元素的偏移量，然后找到 width &每个高度。然后，这只是一个简单的数学问题，以确定它们是否重叠。

我不会为你做所有的工作，但这应该让你正确的方向：

 < div id =one>< / div> 
< div id =two>< / div> 
 
< script> 
 var offsetOne = $（'＃one'）。offset（）; 
 var offsetTwo = $（'＃two'）。offset（）; 
 var widthOne = $（'＃one'）。width（）; 
 var widthTwo = $（'＃two'）。width（）; 
 var heightOne = $（'＃one'）。height（）; 
 var heightTwo = $（'＃two'）。height（）; 
< / script> 
  

剩下的就是使用两个偏移量的.top& .left与宽度和高度一起确定是否有重叠。查看我答案第一段中每个函数中文档的链接。

in jQuery or Javascript, how would I detect if an img tag for example is overlapping another img tag?

解决方案

You can do that by finding the offset of the elements, then finding the width & height of each. It's then just a matter of simple math to determine if they're overlapping.

I'm not going to do all the work for you, but this should get you on the right track:

<div id="one"></div>
<div id="two"></div>

<script>
var offsetOne = $('#one').offset();
var offsetTwo = $('#two').offset();
var widthOne = $('#one').width();
var widthTwo = $('#two').width();
var heightOne = $('#one').height();
var heightTwo = $('#two').height();
</script>

All that's left is to use the two offset's .top & .left along with the widths and heights to determine if there's an overlap. Check out the links to documentation in each of the functions in the first paragraph of my answer.

这篇关于检测Html元素是否与另一个Html元素重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！