拿顶部和左边的位置，并在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中转换为百分比

回答

相关问题