如何在html頁面中使用javascript連續獲取移動對象的位置？

Question

我使用Javascript在我的html頁面中創建了一個移動對象，我應該每次在塊中移動時返回x和y座標。我該怎麼辦？

Answer 1

您可以對相關元素使用getBoundingClientRect（）方法。 試試這個：

var element = document.getElementById("myDivId"); 
console.log(element.getBoundingClientRect()); 

它會給你從左上角座標一切的角落中。 並添加一個window.setInterval（）回調來對其位置進行採樣，並在更改時執行您想要的任何邏輯。

Answer 2

你可以使用.offset（）jQuery函數來獲得元素的當前座標

Answer 3

<script src="http://code.jquery.com/jquery-1.10.2.js"></script> 
<script type="text/javascript"> 
$(function() 
{ 
     var a = $("#divTestBox1").animate(
       { 
         "left" : "200px", 
         "top" : "200px", 
       },5000,function(event){ 

        var x = $("#divTestBox1").offset().left; 


        var posx = $('#pos').html('left:'+x +'px'); 


       } 
     ); 

}); 
</script> 
<div id="divTestBox1" style="position: absolute;">rachana_sharma003</div> 
<div id="pos"></div>