708
2122
Получить координаты курсора на экране
Предлагаем Вам простой JavaScript код, отображающий текущие координаты курсора на экране. Координаты берутся относительно
окна странички и не превышают разрешение экрана.
Данный скрипт позволяет выводить координаты курсора как в statusbar-е, так и в заданном месте странички.
Текущие координаты курсора:
Для получения текущих координат курсора на экране сайта вставьте на свою страничку следующий скрипт:
JavaScript код:
<script type="text/javascript">
function init() {
if (document.layers) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = mousemove;
}
function mousemove(event) {
var mouse_x = mouse_y = 0;
if (document.attachEvent != null) {
mouse_x = window.event.clientX;
mouse_y = window.event.clientY;
} else if (!document.attachEvent && document.addEventListener) {
mouse_x = event.clientX;
mouse_y = event.clientY;
}
status = "x = " + mouse_x + ", y = " + mouse_y;
document.getElementById('xy').innerHTML = "x = " + mouse_x + ", y = " + mouse_y;
}
init()
</script>
Далее, в том месте странички, где необходимо получить координаты курсора (если необходимо), вставляем
элемент <span id=”xy”></span>.
Если Вы все правильно сделали, то при перемещении курсора мыши по экрану браузера внутри элемента
<span id=”xy”></span> и в statusbar-е должны отображаться текущие координаты курсора.
Дата создания: 15:35:47 24.07.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 152236 раз(а).
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
02.04.2015
Определение координат курсора мыши
Возможности jQuery практически безграничны, главное преимущество — интерактивность. Благодаря jQuery можно создавать очень интересные проекты: будь то разработка сайта коттеджного посёлка или создание лендинг пейдж.
Очень часто нужно знать координаты курсора мыши, чтобы внедрить интерактив с пользователем. Сделать это очень просто, создав функцию, которая будет вызываться при событии mousemove и через event.pageX и event.pageY можно получить координаты курсора.
Помимо этого есть возможность определять координаты относительно другого объекта на сайте. Для этого нужно знать координаты самого объекта и инициализировать функцию определения координат при наведении на нужный объект.
- HTML
- CSS
- JS
- SQL
- Код
<p id="coords1">Координаты курсора:</p> <div class="hover"> <p><b>Наведи курсор сюда</b></p> <p id="coords2">Координаты курсора:</p> </div>
.hover {
width: 100%;
height: 200px;
border: #000 solid 1px;
padding: 20px;
box-sizing: border-box;
}
$(document).ready(function(){
// Координаты курсора относительно всего документа
$(document).mousemove(function(event){
var x = event.pageX;
var y = event.pageY;
$('#coords1').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
});
// Координаты курсора относительно отдельного блока
$('.hover').mousemove(function(event){
var pos = $(this).offset();
var elem_left = pos.left.toFixed(0);
var elem_top = pos.top.toFixed(0);
var x = event.pageX - elem_left;
var y = event.pageY - elem_top;
$('#coords2').html( 'Координаты курсора: (' + x + '; ' + y + ')' );
});
});
Демонстрация
Координаты курсора:
Наведи курсор сюда
Координаты курсора:
Иногда бывает необходимым получение положения указателя мыши на экране, если вы пишите код или вам это нужно по другим причинам.
Для получения координат указателя мыши нам понадобится язык Python, а также его библиотеки pyautogui и keyboard.
Для установки библиотек вводим следующие команды в консоль:
~ pip install keyboard ~ pip install mouse
Сначала импортируется библиотека pyautogui.
Строка currentMouseX, currentMouseY = pyautogui.position() – получает местоположение X,Y
Строка print(“X =”,currentMouseX,”Y =”,currentMouseY) – выдает в консоль полученный данные.
Выше приведенный код уже позволяет получать координаты указателя. Но у этого кода есть недостаток. При повторной необходимости координат, нужно перезапускать программу.
Поэтому добавится несколько строчек.
Задача этого кода работать по нажатию кнопки “space”. Работа программы должна многоразовой, поэтому используется цикл while True.
if keyboard.is_pressed(“space”) – это строчка отвечает за проверку нажатия пользователем кнопки “space”.
Если пользователь нажимает кнопку, то срабатывает код. Этот код схож с предыдущим. Отличие заключается в добавлении библиотеки keyboard и цикла.
Более подробнее можете ознакомится роликом ранее.
28.09.2017
Оставить комментарий
Это программа после запуска показывает координаты курсора мышки относительно активного окна и всего рабочего стола. Дополнительно Mouse Point Viewer покажет имя процесса и идентификатор процесса активного окна. Программа бесплатная и установки не требует.
Скачать: Mouse Point Viewer 1.0
- Рабочий стол
Добавить комментарий
Ваш e-mail не будет опубликован. Обязательные поля помечены *
Комментарий
Имя *
E-mail *
Сайт
пять
×
=
двадцать пять
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над определенным элементом.
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}
}JS
Использование
/* Координаты курсора */
$('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);
});JS
1
Координаты курсора внутри элемента
Метод getBoundingClientRect() возвращает объект DOMRect, который содержит размеры элемента и его положение относительно видимой области просмотра.
Если из координат курсора мыши (e.clientX и e.clientY) вычесть положение элемента, то можно получить внутреннее положение курсора и клика.
<p>
<strong>Координаты курсора:</strong> <span id="coord-live"></span><br>
<strong>Координаты клика:</strong> <span id="coord-click"></span>
</p>
<div class="element"></div>HTML
$('.element').mousemove(function(e){
var target = this.getBoundingClientRect();
var x = e.clientX - target.left;
var y = e.clientY - target.top;
$('#coord-live').html(x + ', ' + y);
});
$('.element').click(function(e){
var target = this.getBoundingClientRect();
var x = e.clientX - target.left;
var y = e.clientY - target.top;
$('#coord-click').html(x + ', ' + y);
});JS
2
Положение курсора в элементе
Также можно определить в какой части элемента находится курсор:
<p><strong>Положение:</strong> <span id="coord-live"></span></p>
<div class="element"></div>HTML
По вертикали
$('.element').mouseleave(function(e){
$('#coord-live').html('за пределами элемента');
});
$('.element').mousemove(function(e){
var share = $(this).height() / 3;
var target = this.getBoundingClientRect();
var y = e.clientY - target.top;
if (y >= 0 && y <= share) {
$('#coord-live').html('в верхней части');
} else if (y > share && y <= $(this).height() - share) {
$('#coord-live').html('в центре');
} else {
$('#coord-live').html('в нижней части');
}
});JS
По горизонтали
$('.element').mouseleave(function(e){
$('#coord-live').html('за пределами элемента');
});
$('.element').mousemove(function(e){
var share = $(this).width() / 3;
var target = this.getBoundingClientRect();
var x = e.clientX - target.left;
if (x >= 0 && x <= share) {
$('#coord-live').html('в левой части');
} else if (x > share && x <= $(this).width() - share) {
$('#coord-live').html('в центре');
} else {
$('#coord-live').html('в правой части');
}
});JS
