如果通過使用CSS3的其他元素檢測元素變換

任何簡單的方法來檢測元素，如果它超過另一個元素？如果通過使用CSS3的其他元素檢測元素變換

我正在使用CSS3轉換來移動元素。（because）

實施例： - 所有元件尺寸10×10像素

元＃A transform : translate(170px, 180px) < - 該元件可以CONTROLL用於移動
元＃乙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，按下鍵盤箭頭的參觀CONTROLL

來源

2013-10-29 l2aelba

另見http://stackoverflow.com/questions/12066870/how-to-check-if-an-element-is-overlapping-other-elements，因爲它可能使用更容易['.getBoundingClientRect']（https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect） – andyb

您需要使用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'); 
    } 

});

來源

2013-10-29 14:52:13 enyce12

非常感謝，我會帶一個看：D – l2aelba

非常感謝，那麼檢測100個objs呢？ – l2aelba

這也適用於100個對象，雖然它不會工作得很快。正如我所說的，我建議您將固定元素的位置存儲在一個數組中（或者在這種情況下可能更好的json文件中），以便在需要時訪問它們。 – enyce12

您可以使用.offset看到元素相對的位置到文件。這確實考慮到translate。您可以使用.offset然後.offset.left + width/.offset.top + height獲得矩形的座標。然後您可以輕鬆檢查重疊。

來源

2013-10-29 14:41:17

讓我試試分鐘.... – l2aelba

如果通過使用CSS3的其他元素檢測元素變換

回答

相關問題