拿頂部和左邊的位置，並在javascript中轉換爲百分比

我有一個方形區域捕捉鼠標點擊，並在當前點添加一個新的div。我的目標是把這些頂部：Ypx; left：Xpx;座標並將它們轉換爲使用javascript的百分比，因爲正方形區域將在不同頁面上設置爲不同的大小。拿頂部和左邊的位置，並在javascript中轉換爲百分比

我現在的例子http://jsfiddle.net/p5h26/1/

//current js for the effect(some small diferences in the click event using backbone events) 
$(".div_container").click(function(e, ui){ 
      var parentOffset = $(this).offset();   
      var relativeXPosition = (e.pageX - parentOffset.left); 
      var relativeYPosition = (e.pageY - parentOffset.top);   
      $(".div_container").append('<div class="MAPICON" style="top:'+relativeYPosition+'px; left:'+relativeXPosition+'px;"></div>'); 
});

編輯：我希望能夠把頂部和左側位置，並將它們保存到我的數據庫爲百分比，我不知道該怎麼做數學題了那或我會在哪裏開始。

來源

2013-02-18 PhazingAzrael

我不明白你在做什麼。任何你應該使用CSS放置你的「圖標」的方式'position：absolute;'not'relative' – 2013-02-18 19:56:23

這不會起作用，因爲放置在父母div內的div將在頁面中的任何位置。我的目標是將這些頂部和左側的位置從像素變爲百分數，這在上面的段落中已經清楚地說明了。 – PhazingAzrael 2013-02-18 19:58:39

可以計算與代碼的比例是這樣的：

var $this = $(this), offset = $this.offset(), 
    width = $this.innerWidth(), height = $this.innerHeight(); 
var parentOffset = $(this).offset();   
var relativeXPosition = (e.pageX - parentOffset.left), 
    percentx = relativeXPosition/width; 
var relativeYPosition = (e.pageY - parentOffset.top), 
    percenty = relativeYPosition/height;

但是我想你想從相對變化，以絕對定位。當玩你的小提琴非常多的點擊時，附加的div開始碰撞並擾亂彼此的位置。

來源

2013-02-18 23:14:33

拿頂部和左邊的位置，並在javascript中轉換爲百分比

回答

相關問題