<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><style type="text/css">*{padding: 0;margin: 0;}.wrap{width: 400px;height: 400px;margin: 20px auto;border-radius: 50%;}.wrap div{width: 100px;height: 100px;background: pink;}#box1{border-radius: 50%;}</style></head><body><div class="wrap"><div id="box1"></div><div id="box2"></div></div></body><script type="text/javascript">var $box1 = document.getElementById(‘box1‘);var $box2 = document.getElementById(‘box2‘);function getCirclePoint(dom){var posit = dom.getBoundingClientRect(); posit.circleX = posit.left + posit.width/2;posit.circleY = posit.top + posit.height/2;return posit;}function crash(dom1,dom2){var result = {leavelX:false,leavelY:false}var pos1 = getCirclePoint(dom1);var pos2 = getCirclePoint(dom2);//crashXvar leavelY = Math.abs(pos1.circleY - pos2.circleY);var leavelX = Math.abs(pos1.circleX - pos2.circleX);var maxLeavelY= (pos1.height+pos2.height)/2;var maxLeavelX = (pos1.width+pos2.width)/2;if(leavelY < maxLeavelY){//x方向有可能相交var leavelXMiss = leavelX - (pos1.width + pos2.width)/2;if(leavelXMiss <= 0){//x轴方向相交console.log("x相交",leavelXMiss);result.leavelX = true;}}if(leavelX < maxLeavelX){//Y方向相交var leavelYMiss = maxLeavelY - (pos1.height + pos2.height)/2;if(leavelYMiss <= 0){//y轴相交console.log("Y相交",leavelYMiss);result.leavelY = true;}}if(leavelY == maxLeavelY && leavelX == maxLeavelX){//对角相交console.log(‘对角相交‘);result.leavelX = true;result.leavelY = true;}console.log(result);return result;}crash($box1,$box2);</script></html>
js计算两个矩形相交
原文地址：http://www.cnblogs.com/muamaker/p/7779673.html