Mic*_*sby 5 html javascript jquery
在jQuery或Javascript中,我如何检测img标签是否与另一个img标签重叠？
你可以通过找到元素的偏移量,然后找到每个元素的宽度和高度来做到这一点.然后,只需要简单的数学来确定它们是否重叠.
我不会为你做所有的工作,但这应该让你走上正轨:
<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以及宽度和高度来确定是否存在重叠.查看我的答案第一段中每个功能的文档链接.
我刚写了一个js文件供你使用=)希望它可以帮助你......我花了一段时间才完成它
您可以从以下链接下载:solid-dotheyoverlap.js
只需包含那个js文件并调用doTheyOverlap函数和你想知道它们是否重叠的两个div,就是这样!
这是我为你做的一个基本而简单的例子:
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="solid-dotheyoverlap.js"></script>
<script type="text/javascript">
$(function() {
alert(doTheyOverlap($('#div0'),$('#div1')));
});
</script>
</head>
<body>
<div id="div0" style="position: absolute; width : 200px; height : 200px; background-color : red">div 0</div>
<div id="div1" style="position: absolute; width : 200px; height : 200px; background-color : yellow; top:100px; left:100px">div 1</div>
</body>
</html>
而且我写的solid-doTheyOverlap.js的代码比@artwl提出的解决方案更清晰,更有效.它是这样的:
function doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));}
function findSmallestY(div0, div1){
return (div0.offset().top < div1.offset().top)? div0 : div1;
}
function yInstersection(div0, div1){
var divY0 = findSmallestY(div0, div1);
var divY1 = (div0 != divY0)? div0 : div1;
return (divY0.offset().top + divY0.height()) - divY1.offset().top > 0;
}
function findSmallestX(div0, div1){
return (div0.offset().left < div1.offset().left)? div0 : div1;
}
function xInstersection(div0, div1){
var divX0 = findSmallestX(div0, div1);
var divX1 = (div0 != divX0)? div0 : div1;
return (divX0.offset().left + divX0.width()) - divX1.offset().left > 0;
}
用简单的话来说,我意识到"弄清楚2个方格是否重叠就像弄清楚它们的分段(隐藏在x轴和y轴上)是否过分一样简单",在javascript中它就像这个" doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));}",来自它就像一对子((divY0.offset().top + divY0.height()) - divY1.offset().top > 0,(divX0.offset().left + divX0.width()) - divX1.offset().left > 0)一样简单,以确定这些段是否重叠.
使用getBoundingClientRect()的另一种方式.我正在分享这个,因为我不喜欢这里的答案,这是我的解决方案.
function checkForOverlap(el1, el2) {
var bounds1 = el1.getBoundingClientRect();
var bounds2 = el2.getBoundingClientRect();
var firstIstLeftmost = (bounds1.left <= bounds2.left);
var leftest = firstIstLeftmost ? bounds1 : bounds2;
var rightest = firstIstLeftmost ? bounds2 : bounds1;
//change to >= if border overlap should count
if(leftest.right > rightest.left) {
//
var firstIsTopmost = (bounds1.top <= bounds2.top);
var topest = firstIsTopmost ? bounds1 : bounds2;
var bottomest = firstIsTopmost ? bounds2 : bounds1;
//change to >= if border overlap should count
return topest.bottom > bottomest.top;
}
else return false;
}
| 归档时间： |
|
| 查看次数： |
7306 次 |
| 最近记录： |