Question

我希望能够在用户点击的位置标记图像，存储坐标，然后能够在以后重新创建标记。我已经将存储部件放下了，但是我无法将标记图像显示在图像上。

我使用绝对定位找到了类似的问题here，但我希望坐标相对于图像。

看起来jQuery position会给我相对于父级的位置，但是从那里我将如何相对于父级创建和定位标记图像？任何帮助将不胜感激。感谢

 <div id="container">
    <img id="imgtoclick"></img>
</div>


$(document).ready(function() {
    $("#imgtoclick").click(function(e) {
        e.preventDefault();
        var left = this.position.left;
        var top = this.position.top;
    //how to create mark image relative to parent
        var img = $('<img>');
    })
});

Answer 1

这应该做你想要的：

$('img').click(function(event) {
  var x = event.pageX - this.offsetLeft;
  var y = event.pageY - this.offsetTop;

  alert('X: ' + x + '\nY:' + y);
});

Answer 2

您将按照以下步骤操作：

给#container这种风格

容器 { 位置：相对; }
提供将显示此样式标记的图像

标记 { 位置：绝对; left：//来自jQuery top：//从jQuery位置开始 }

Answer 3

关注@Blenders帖子但是如果您的图片嵌套在定位元素中，则需要递归获取坐标：

var myImg = ...

var getAbsoluteOffset = function (el) {
  var x=0, y=0;
  while (el) {
    x += el.offsetLeft;
    y += el.offsetTop;
    el = el.offsetParent;
  };
  return {x:x,y:y};
}

myImg.onclick = function(evt) {
  var offset, x, y;
  offset = getAbsoluteOffset(this);
  var x = evt.pageX - offset.x;
  var y = evt.pageY - offset.y;
  alert('x: ' + x + '\ny: ' + y);
};

使用相对定位在图像上创建标记？

3 个答案: