如何根據頁面上不同對象的位置在Javascript/Mootools中定位箭頭

我已經創建了一個腳本，可以根據懸停時元素的位置在頁面上定位一個框。工作得很好，但是除了移動的盒子，我想在盒子裏放一個箭頭指向懸停的元素。我只是無法弄清楚如何。如何根據頁面上不同對象的位置在Javascript/Mootools中定位箭頭

我試着水平放置它，類似於我如何垂直使用它，但這甚至不會接近正確。我的javascript：

docSize = $('innerbody').getSize(); 
hint_obj = $('hint_obj'); 
hint_arr = hint_obj.getChildren('.hint_arr')[0]; 

$$('.item').addEvents({ 
    mouseenter: function(e) { 
     var el = e.target; 
     var elemPosition = el.getPosition(); 
     hint_obj.setStyle('bottom', (docSize.y - elemPosition.y - 80)); 
     hint_arr.setStyle('left', (docSize.x - elemPosition.x)); 
    }, 
    mouseout: function(e) { 
     hint_obj.setStyle('bottom', null); 
    } 
});

我做什麼，我試圖在這裏做的樣機：http://jsfiddle.net/0jowade8/2/

任何意見，將不勝感激。

來源

2014-10-20 Chaosxmk

這是你想什麼呢？ http://jsfiddle.net/0jowade8/3/ – Sergio 2014-10-20 15:33:20

那麼，這實際上是定位箭頭，但不是框，但我能夠適應它，並得到它的工作（一個變量定位箱，一個變量用於定位箭頭）。 – Chaosxmk 2014-10-20 15:52:50

在sergio的位置上，使用代表團，你可以在本地使用正確的上下文http://jsfiddle.net/0jowade8/4/在單個事件中完成它 - 但它可以進一步簡化，甚至只用CSS解決。 – 2014-10-20 16:03:48

如前所述Dimitar Christoff，可以利用CSS只能通過使用:after僞元素解決。

.item:hover:after { 
    border-bottom: 14px solid rgba(255, 255, 255, 1); 
    border-left: 14px solid rgba(0, 0, 0, 0); 
    border-right: 14px solid rgba(0, 0, 0, 0); 
    content: ""; 
    position: absolute; 
    top: 66px; 
    left: 26px; 
}

FIDDLE

來源

2014-10-21 15:29:39 Danijel

我對這個解決方案的問題（即使它會工作），在我的情況下，最終產品會附加到盒子的附加效果（以及隨後的箭頭坐在裏面）。雖然我可以將這些動畫分別添加到箭頭中，但如果我只能使用一個動畫製作動畫，就會浪費內存來爲兩個單獨的對象設置動畫。無論如何，謝謝你。 – Chaosxmk 2014-10-21 20:33:17

如何根據頁面上不同對象的位置在Javascript/Mootools中定位箭頭

回答

相關問題