虽然不是100%准确，但对于大多数情况都是有效的。我使用了这里的算法：
function isUndefined(a) {
return a === undefined;
}
/**
* Helper function to determine whether there is an intersection between the two polygons described
* by the lists of vertices. Uses the Separating Axis Theorem
*
* @param a an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon
* @param b an array of connected points [{x:, y:}, {x:, y:},...] that form a closed polygon
* @return true if there is any intersection between the 2 polygons, false otherwise
*/
function doPolygonsIntersect (a, b) {
var polygons = [a, b];
var minA, maxA, projected, i, i1, j, minB, maxB;
for (i = 0; i < polygons.length; i++) {
// for each polygon, look at each edge of the polygon, and determine if it separates
// the two shapes
var polygon = polygons[i];
for (i1 = 0; i1 < polygon.length; i1++) {
// grab 2 vertices to create an edge
var i2 = (i1 + 1) % polygon.length;
var p1 = polygon[i1];
var p2 = polygon[i2];
// find the line perpendicular to this edge
var normal = { x: p2.y - p1.y, y: p1.x - p2.x };
minA = maxA = undefined;
// for each vertex in the first shape, project it onto the line perpendicular to the edge
// and keep track of the min and max of these values
for (j = 0; j < a.length; j++) {
projected = normal.x * a[j].x + normal.y * a[j].y;
if (isUndefined(minA) || projected < minA) {
minA = projected;
}
if (isUndefined(maxA) || projected > maxA) {
maxA = projected;
}
}
// for each vertex in the second shape, project it onto the line perpendicular to the edge
// and keep track of the min and max of these values
minB = maxB = undefined;
for (j = 0; j < b.length; j++) {
projected = normal.x * b[j].x + normal.y * b[j].y;
if (isUndefined(minB) || projected < minB) {
minB = projected;
}
if (isUndefined(maxB) || projected > maxB) {
maxB = projected;
}
}
// if there is no overlap between the projects, the edge we are looking at separates the two
// polygons, and we know there is no overlap
if (maxA < minB || maxB < minA) {
console.log("polygons don't intersect!");
return false;
}
}
}
return true;
};
$('#r').click(function() {
var rota = Math.floor( Math.random() * 100 ),
rotb = Math.floor( Math.random() * 100 ),
pointsa = new Array(4),
pointsb = new Array(4);
$('#a').css('transform', 'rotateZ(' + rota + 'deg)');
$('#b').css('transform', 'rotateZ(' + rotb + 'deg)');
$('#a div').each(function(i) {
pointsa[i] = {x: parseInt($(this).offset().left), y: parseInt($(this).offset().top)};
});
$('#b div').each(function(i) {
pointsb[i] = {x: parseInt($(this).offset().left), y: parseInt($(this).offset().top)};
});
$('#s').val("intersection: " + doPolygonsIntersect(pointsb, pointsa).toString());
});
我猜我的脚本并不是最好的方法，它基本上是在0到100度之间随机旋转，获取每个角落（使用div可以用数学方法计算位置，但我不行 :D）的x和y位置，并使用这些坐标运行算法。
我发现了yckart的overlaps.js。
我在这里用旋转的div制作了一个fiddle：http://jsfiddle.net/n3M5e/
你可以自己在CSS中更改div的旋转，检测仍然有效。
overlaps.js:
(function ($) {
$.fn.overlaps = function (obj) {
var elems = {
targets: [],
hits: []
};
this.each(function () {
var bounds = $(this).offset();
bounds.right = bounds.left + $(this).outerWidth();
bounds.bottom = bounds.top + $(this).outerHeight();
var compare = $(obj).offset();
compare.right = compare.left + $(obj).outerWidth();
compare.bottom = compare.top + $(obj).outerHeight();
if (!(compare.right < bounds.left || compare.left > bounds.right || compare.bottom < bounds.top || compare.top > bounds.bottom)) {
elems.targets.push(this);
elems.hits.push(obj);
}
});
return elems;
};
}(jQuery));
希望我有所帮助。
编辑：
感谢 @jbrosi，overlaps.js 与旋转的 div 不太兼容。
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 (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
return true;
}
另一个演示
您还可以参考http://jsfiddle.net/98sAG/进行碰撞检测。
使用以下代码：
var overlaps = (function () {
function getPositions( elem ) {
var pos, width, height;
pos = $( elem ).position();
width = $( elem ).width();
height = $( elem ).height();
return [ [ pos.left, pos.left + width ], [ pos.top, pos.top + height ] ];
}
function comparePositions( p1, p2 ) {
var r1, r2;
r1 = p1[0] < p2[0] ? p1 : p2;
r2 = p1[0] < p2[0] ? p2 : p1;
return r1[1] > r2[0] || r1[0] === r2[0];
}
return function ( a, b ) {
var pos1 = getPositions( a ),
pos2 = getPositions( b );
return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] );
};
})();