Question

我想根据我点击的任何地方在网格图像上留点。我已经掌握了一般概念，但不幸的是我的点数仍然比我点击的位置略高。我该如何调整呢？

GROUP BY

Answer 1

问题是您在网格中使用x和y坐标，然后相对于页面进行定位。

修复是通过将标记附加到imagegrid元素来相对于网格定位。

我给了#horizontal和#vertical一个公共类，因此我可以使#imagegrid div样式规则更具体。

然后我将$('body').append更改为$('#imagegrid').append，最后我在两个维度中减去了8个像素，使点居中。

更新了JavaScript：

$("#imageholder").append(
  $('<div class="marker" style="border-radius: 25px;"></div>').css({
    position: 'absolute',
    top: ver - 8 + 'px',
    left: hor - 8 + 'px',
    width: '10px',
    height: '10px',
    background: '#5b5e5f'

  })
);

完整小提琴（包括前面提到的HTML / CSS更改）：https://jsfiddle.net/dr0emvkr/2/。

Answer 2

您可以将.marker添加到#imageholder。并使用transform: translate()将垂直/水平/ .marker行放在您单击的位置的死点。

＆＃13;

$('#imageholder img').on('click', null, [$('#horizontal'), $('#vertical')], function(e) {
  e.data[1].css('left', e.offsetX == undefined ? e.originalEvent.layerX : e.offsetX);
  e.data[0].css('top', e.offsetY == undefined ? e.originalEvent.layerY : e.offsetY);

  $('#imageholder').click(function(event) {
    var hor = event.offsetX,
      ver = event.offsetY;

    $(".marker").remove();
    $("#imageholder").append(
      $('<div class="marker" style="border-radius: 25px;"></div>').css({
        position: 'absolute',
        top: ver + 'px',
        left: hor + 'px',
        width: '10px',
        height: '10px',
        background: '#5b5e5f',
        display: 'block',
        transform: 'translate(-50%,-50%)'

      })
    );
  });

  e.data[0].show();
  e.data[1].show();

  $(document).ready(function() {
    $('#imageholder').mouseover(function() {
      $(".marker").css("box-shadow", "0 0 0 3px rgba(0, 0, 0, 0.5)");
    });
    $('#imageholder').mouseout(function() {
      $(".marker").css("box-shadow", "none");
    });
  });

});

＆＃13;

#imageholder:hover {
  cursor: crosshair;
}

article,
aside,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

#imageholder div {
  display: none;
  background-color: black;
  position: absolute;
}

#imageholder {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

#vertical {
  width: 2.5px;
  height: 100%;
  transform: translateX(-50%)
}

#horizontal {
  width: 100%;
  height: 2.5px;
  transform: translateY(-50%)
}

* {
box-sizing:border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <h1>Some Text</h1>
  <h2>Some other text</h2>
  <div id="imageholder">
    <div id="horizontal"></div>
    <div id="vertical"></div>
    <img src="http://i.imgur.com/dRUn4ip.png">
  </div>

  <script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</body>

＆＃13;

在图像上点击点击

2 个答案: