Question

尝试捕获图像上的点击位置（最终用户标记为x）。但在窗口调整大小的＆＃39; X＆＃39;职位变动。我的代码中缺少什么，我如何在纵向和横向模式中保持位置

<script>
$("#_img").on("click",function(event){
   var X = event.pageX-5, Y = event.pageY-5;
   $("#marker").css({
     "left":X,
     "right":Y 
   }).show();
});
</script>

<img id="_img" src="car.png" width="550px" height="168px"/>
<div id="_mrk" style="display:none;">x</div>

Answer 1

每次调整窗口大小或方向改变时，你必须更新'x'的位置，图像应该是perentage而不是像素

var width = 0;
    var height = 0;

    $("#_img").on("click", function(event) {
      var X = event.pageX,
        Y = event.pageY;
      $("#_mrk").css({
        "left": X,
        "top": Y
      }).show();
      width = $("#_img").width();
      height = $("#_img").height();
    });

    function getNewValue(posValue, oldImgPos, newImgPos) {
      return posValue * (newImgPos / oldImgPos);
    }

    $(window).resize(function() {
      var newx = getNewValue($('#_mrk').offset().left, width, $("#_img").width());
      $("#_mrk").css("left", newx);

      var newy = getNewValue($('#_mrk').offset().top, height, $("#_img").height());
      $("#_mrk").css("top", newy);
      width = $("#_img").width();
      height = $("#_img").height();
    });

 #_mrk {
      position: absolute;
    }
    
    #_img {
      width: 100%;
    }

<img id="_img" src="http://clipartion.com/wp-content/uploads/2015/11/colorable-car-line-art-free-clip-art.png" width="550px" height="168px" />
  <div id="_mrk" style="display:none;">x</div>

Answer 2

单击img时保存文档宽度的值。向resize事件添加事件监听器，并在触发时更改X和Y值：

var X, Y, doc_width, a_ratio;

$("#_img").on("click", function(event){
   X = event.pageX-5;
   Y = event.pageY-5;
   doc_width = document.documentElement.clientWidth;
   a_ratio = $(this).width()/$(this).height();
   move_mark(X, Y);   
});

$(window).on("resize", function(){
   var x = X + (document.documentElement.clientWidth - doc_width);
   var y = Y + (x - X)/a_ratio;
   move_mark(x, y);
})

function move_mark(X,Y){
    $("#marker").css({
     "left":X,
     "right":Y 
   }).show();
}

Answer 3

您可以使用百分比而不是像素来支持所有尺寸首先确保img和标记的容器是相对位置的，标记是绝对位置。

然后，点击时你需要计算图像中的X和Y，然后根据计算百分比。

$sql = "SELECT * FROM teams";
$result = $conn->query($sql);

while ($tr = mysqli_fetch_array($result, MYSQLI_ASSOC)) { ?>
    <tr>
        <td><?= $tr['t_Naam'] ?></td>
    </tr>
<?php } ?>

位置（X，Y坐标）更新页面调整大小

3 个答案: