Div重叠和碰撞位置 [英] Div overlapping and collision position

问题描述

我试图看看我的两个div会重叠并相互碰触。这个例子中有两个黄色的div。



为什么在div甚至不重叠或相互接触的阶段，碰撞返回true？ />


http://jsfiddle.net/abc123/HWfMt/162

I am trying to see when my two divs are going to overlap and touch each other. The two yellow divs on this example.

Why is it that the collision returns true at a stage when the divs aren't even overlapping or touching each other ?

http://jsfiddle.net/abc123/HWfMt/162

var degree = 0;
var degreeSmall = 0;
var timer=30;
var $spin = $(".gear");
var $spinSmall = $(".gear-small");
var to;
var toSmall;

function collision($div1, $div2) {
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;
    
    if (x1 < x2 + w2 &&
       x1 + w1 > x2 &&
       y1 < y2 + h2 &&
       h1 + y1 > y2) {
        $('#variables').html('true');
    }
    else
    {
           $('#variables').html('false');
    }
    
    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
    return true;}


<pre lang="Javascript">$( document ).ready(function() {
    to = setInterval(function() {
        rotate();
    }, timer);
});

function rotate() {
  //  degree++;
//    $spin.css({ 'WebkitTransform': 'rotate(' + degree + 'deg)'});  
    //$spin.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
   
    $('#result').text('result: ' + collision($('.gear .inner-gear.yellow'), $('.gear-small .inner-gear.yellow')));}

推荐答案

spin =

（ 。gear） ;
var

spinSmall =

spinSmall =

这篇关于Div重叠和碰撞位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！