6

jQueryまたはJavascriptでは、たとえばimgタグが別のimgタグと重なっているかどうかをどのように検出できますか?

4

5 に答える 5

8

要素のオフセットを見つけてから、それぞれの幅と高さを見つけることでそれを行うことができます。次に、それらが重複しているかどうかを判断するのは、単純な計算の問題です。

私がすべての作業を行うわけではありませんが、これで正しい軌道に乗ることができます。

<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>

あとは、2 つのオフセットの .top と .left を幅と高さと共に使用して、オーバーラップがあるかどうかを判断するだけです。私の回答の最初の段落にある各関数のドキュメントへのリンクを確認してください。

于 2012-07-25T01:59:14.950 に答える
7

使用する js ファイルを作成しました =) お役に立てば幸いです... 完了するまでにしばらく時間がかかりました

次のリンクからダウンロードできます: solid-dotheyoverlap.js

その js ファイルをインクルードし、重複しているかどうかを知りたい 2 つの div で doTheyOverlap 関数を呼び出すだけです。

これが私があなたのために作った基本的で簡単な例です：

<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;
}

doTheyOverlap(div0, div1){return (yInstersection(div0, div1) && xInstersection(div0, div1));}簡単に言えば、「2 つの正方形が重なっているかどうかを判断することは、それらのセグメント (x 軸と y 軸による) が重なっているかどうかを判断するのと同じくらい簡単だ」ということに気付きました。javascript では、次のようになります。そこでは、これらのセグメントが重複しているかどうかを調べるための減算 ( (divY0.offset().top + divY0.height()) - divY1.offset().top > 0、 )のペアと同じくらい簡単です。(divX0.offset().left + divX0.width()) - divX1.offset().left > 0

于 2012-07-25T03:45:44.803 に答える
4

デモ

<style type="text/css">
    div{
        width:200px;
        height:200px;
        background:#EEE;
    }
    #two{
        position:absolute;
        left:100px;
        top:50px;
        background:#F60;
    }
</style>
<div id="one">One</div>
<div id="two">Two</div>
<div id="three">Three</div>
<script>
    console.log(isOverlap("one","two"));//true
    console.log(isOverlap("one","three"));//false
    console.log(isOverlap("two","three"));//true
    function isOverlap(idOne,idTwo){
        var objOne=$("#"+idOne),
            objTwo=$("#"+idTwo),
            offsetOne = objOne.offset(),
            offsetTwo = objTwo.offset(),
            topOne=offsetOne.top,
            topTwo=offsetTwo.top,
            leftOne=offsetOne.left,
            leftTwo=offsetTwo.left,
            widthOne = objOne.width(),
            widthTwo = objTwo.width(),
            heightOne = objOne.height(),
            heightTwo = objTwo.height();
        var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne 
                && topTwo > topOne && topTwo < topOne+heightOne,
            rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
                && topTwo > topOne && topTwo < topOne+heightOne,
            leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne 
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne,
            rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne 
                && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne;
        return leftTop || rightTop || leftBottom || rightBottom;
    }
</script>
于 2012-07-25T02:50:20.963 に答える