0

現在、マウスのクリックをキャプチャし、そのスポットに新しいdivを追加する正方形の領域があります。私の目的はそれらのトップを取ることです：Ypx; 左：Xpx; 正方形の領域はページごとに異なるサイズに設定されるため、座標を調整し、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>');
});

編集：私は上と左の位置を取り、それらをパーセントとしてデータベースに保存できるようにしたいのですが、そのための計算方法やどこから始めればよいのかわかりません。

4

1 に答える 1

0

次のようなコードでパーセンテージを計算できます。

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-18T23:14:33.380 に答える