Question

检测元素是否超过另一个元素的任何简单方法？

我正在使用CSS3转换来移动元素。（because）

示例： - 所有元素大小为10x10像素

元素#A transform : translate(170px, 180px)＆lt; - 此元素可以控制移动
元素#B transform : translate(200px, 200px)

如何检测某个元素的元素#A？

我使用jQuery元素控制器的完整演示： http://jsfiddle.net/ndZj5/

var over = false;
// do something with `over` to `true` to detect this...
if(!over) {
  my.css('transform','translate('+x+'px,'+y+'px)');
}

浏览我的demo，按键盘箭头控制

Answer 1

您可以使用.offset查看元素相对于文档的位置。此确实考虑了translate。您可以使用.offset然后.offset.left + width / .offset.top + height获取矩形的坐标。然后，您可以轻松检查重叠。

Answer 2

您需要使用offset获取已移动对象的position，并将其与“块”进行比较。

我在演示中设置了“块”，以便在叠加时变为蓝色。但你可以做任何你想做的事。

此外，您正在使用setInterval创建开销。我已将其移至keyup事件处理程序。

此外，如果它们是静态元素，我建议您将“块”的位置存储在array中，并在需要时访问它们。

Working example

var objTop = my.offset().top,
    objLeft = my.offset().left,
    objWidth = my.width(),
    objHeight = my.height();            

$('.fixed').each(function(e){
    var self = $(this),
        selfLeft = self.offset().left,
        selfTop = self.offset().top,
        selfWidth = self.width(),
        selfHeight = self.height();

    self.css('background','black');                 

    if((objLeft + objWidth) > selfLeft && objLeft < (selfLeft + selfWidth) && (objTop + objHeight) > selfTop && objTop < (selfTop + selfHeight)){
        self.css('background','blue');
    }

});

通过使用CSS3 Transform检测元素是否超过另一个元素

2 个答案: