Показать анимацию на месте щелчка

Question

Показать анимацию на месте щелчка

0

У меня есть 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>

alexisdevarennes 02 дек. 2013, в 16:43

Источник

2

Можете ли вы показать нам свой код того, что у вас есть до сих пор?
Jop 02 дек. 2013, в 14:53
0

В чем конкретно проблема / ваш вопрос? Как установить элемент в определенном месте? Как динамически загрузить, например, IMG?
kero 02 дек. 2013, в 14:53
0

Кингкеро: Да, как разместить изображение в месте щелчка.
alexisdevarennes 02 дек. 2013, в 14:58

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

mouse

3 ответа

5

Вы можете создать элемент div, для которого первоначально установлено значение hide() и чей индекс z больше, чем элемент, содержащий изображение. Используйте pageX и pageY для динамического позиционирования этого элемента div при щелчке, а затем используйте метод show() для этого элемента.

Akshat 02 дек. 2013, в 12:02

0

Проверьте эту ссылку, чтобы узнать, как получить координаты x, y с помощью jQuery.

Как только вы получите координаты, вы пишете функцию, чтобы делать все, что хотите, с координатами.

Matt 02 дек. 2013, в 13:33

Ещё вопросы

Можете ли вы показать нам свой код того, что у вас есть до сих пор?
В чем конкретно проблема / ваш вопрос? Как установить элемент в определенном месте? Как динамически загрузить, например, IMG?
Кингкеро: Да, как разместить изображение в месте щелчка.

alexisdevarennes · Accepted Answer · 2013-12-03T11-18-00.000Z

Это то, что я закончил кодированием:

<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>