2

有什么简单的方法可以检测元素是否超过另一个元素？

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

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

  • Element#A transform : translate(170px, 180px)<-- 这个元素可以控制移动
  • 元素#Btransform : translate(200px, 200px)

如何检测 element#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)');
}

参观我的演示，按键盘箭头控制

4

2 回答 2

3

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

我在我的演示中设置了“块”，当它们被覆盖时变为蓝色。但是你可以为所欲为。

此外，您还使用setInterval. 我已将其移至keyup事件处理程序。

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

工作示例

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

});
于 2013-10-29T14:52:13.203 回答
2

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

于 2013-10-29T14:41:17.900 回答