Question

我有一个包含图像的div。当用户点击图像时，将保存鼠标的x，y坐标。

我想添加一个效果，以便用户可以看到他/她点击的位置。即如果用户在图像中间单击，则应在其中放置标记或动画，但如果他/她在其他位置单击该标记应该被移除并显示在新的单击位置。

我诚实地到处寻找解决方案/答案。这里要求的是用于坐标函数的代码：

<script type="text/javascript">
<!--

function FindPosition(oElement)
{
  if(typeof( oElement.offsetParent ) != "undefined")
  {
    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent)
    {
      posX += oElement.offsetLeft;
      posY += oElement.offsetTop;
    }
      return [ posX, posY ];
    }
    else
    {
      return [ oElement.x, oElement.y ];
    }
}

function GetCoordinates(e)
{
  var PosX = 0;
  var PosY = 0;
  var ImgPos;
  ImgPos = FindPosition(myImg);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY)
  {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY)
    {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
    }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
 // document.getElementById("x").innerHTML = PosX;
 // document.getElementById("y").innerHTML = PosY;
  document.getElementById("xtextinput").value = PosX;
  document.getElementById("ytextinput").value = PosY;
}

//-->
</script>
<th width="53%" height="auto" class="settingsrow" style="border-bottom: hidden; cursor:crosshair;" scope="row">
<img id="myImgId" alt="" src="../floorplanimages/<?php echo ($floorplan['floorplanimage']) ?>" width="650" height="951" />
</th>
<script type="text/javascript">
<!--
var myImg = document.getElementById("myImgId");
myImg.onmousedown = GetCoordinates;
//-->
</script>

Answer 1

您可以创建一个div元素，该元素最初设置为hide（），其z-index大于包含元素的图像。使用pageX和pageY在单击时动态定位div元素，然后对该元素使用show（）方法。

Answer 2

查看this link以了解如何使用jQuery检索x，y坐标。

获得坐标后，您可以使用坐标编写一个函数来执行任何操作。

Answer 3

这就是我最终编码的原因：

<img src="../icons/location_marker_green.png" id="marker" style="display: ; position: absolute;" />
    <img src="background" id="myImgId" />
    <script type="text/javascript">
    $('#myImgId').click(function(e)
    {
       $('#markeranim').css('left', e.pageX).css('top', e.pageY).show();
    });
    </script>

在点击位置显示动画

3 个答案: