• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Вывести координаты курсора на экране (Определение координат курсора мыши на вашем экране)
Вывести координаты курсора на экране
Kosten
Дата: Понедельник, 2019-10-28, 23:00 | Сообщение 1
Оффлайн
Администраторы
Сообщений:25131
Награды: 57


Некоторые вероятно задумывались. а какие координаты, и если они у курсора, что в этой статье вы узнаете о выводе координат курсора на экране. Что смотрится интересно, где первая функция показывает координаты в онлайн режиме.

Но только стоит нажать на правый клик, как вы получите полностью координаты, где в этот момент находится курсор. Это такая фишка, которая может кому та быть интересна, где можно изначально посмотреть на demo странице.



Подключаем библиотеку

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

HTML

Код
<p><strong>Координаты курсора:</strong> <span id="coord-live"></span></p>
<p><strong>Координаты клика:</strong> <span id="coord-click"></span></p>

JS

Код
function getPosition(e){
    var x = y = 0;

    if (!e) {
  var e = window.event;
    }

    if (e.pageX || e.pageY){
  x = e.pageX;
  y = e.pageY;
    } else if (e.clientX || e.clientY){
  x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    return {x: x, y: y}
}

/* Координаты курсора */
$('body').mousemove(function(e){
    var coord = getPosition(e);
    $('#coord-live').html(coord.x + "," + coord.y);
});

/* Координаты клика */
$('body').click(function(e){
    var coord = getPosition(e);
    $('#coord-click').html(coord.x + "," + coord.y);
});

На этом установка завершена.

Демонстрация
Прикрепления: 0131232.png(2.9 Kb) · 7958830.zip(3.4 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Вывести координаты курсора на экране (Определение координат курсора мыши на вашем экране)
  • Страница 1 из 1
  • 1
Поиск: