Question

我有一个方形区域，可捕获鼠标点击并在当前位置添加新div。我的目标是把那些最重要的：Ypx;左：Xpx;坐标并使用javascript将它们转换为百分比，因为方形区域将在不同的页面上设置为不同的大小。

//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>');
});

编辑：我希望能够占据顶部和左侧的位置，并以百分比的形式将它们保存到我的数据库中，我不知道如何进行数学计算或我将从哪里开始。

Answer 1

您可以使用以下代码计算百分比：

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开始碰撞并破坏彼此的位置。

在顶部和左侧位置转换为javascript中的百分比

1 个答案: