Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Центрировать элемент (https://javascript.ru/forum/misc/71710-centrirovat-ehlement.html)

marc 07.12.2017 10:28

Центрировать элемент
 
Центрировать элемент относительно точки щелчка мышью. Подскажите пожалуйста, как правильно выполнить этот код?

Nexus 07.12.2017 10:50

Повешать на документ обработчик клика, определять координаты клика, позиционировать блок.

рони 07.12.2017 12:16

центрирование по месту клика
 
marc,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
    .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 300px;
          transition: all .8s ease-in-out;
    }

  </style>
  <script>
    document.addEventListener('click', fn, false);
    function fn(event)
    {
       var el = document.querySelector('.hot')
       el.style.transform = 'translate('+(event.pageX - el.offsetWidth/2)+'px ,' +(event.pageY - el.offsetHeight/2) + 'px)'
    }
  </script>
</head>

<body>

 <div class="hot"></div>

</body>
</html>

marc 07.12.2017 22:58

рони,
Спасибо большое!


Часовой пояс GMT +3, время: 18:35.