Как определить координаты курсора

Когда я только начинал своё знакомство со скриптами и делал первые шаги в освоении JavaScript, порой возникали серьезные трудности при работе с настройками меню или каких-то схожих по особенностям элементов сайта.

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

В начале своего пути я что только не делал, чтобы решить подобную проблему: строил вокруг рабочей области всевозможные сетки разметки скриптами (чтобы не загружать код) и привязывал к ним исчезновение по факту пересечения границ сетки курсором… Сейчас даже самому смешно.

Естественно, работала такая конструкция медленно. А это никуда не годится. Ведь для нас важна скорость загрузки страницы!

Поэтому мы идем другим путем.

Всё, что нам потребуется, это две переменных pageX и pageY — координаты нашего курсора.

Пример

Для наглядности давайте рассмотрим простенькую задачку: допустим, у нас есть некий блок (квадратик). По-умолчанию он черный. Если мы на него наведем курсор, от станет желтым. А если курсор опустится ниже, то наш блок исчезнет.

Всё это становится возможным благодаря функции

$("body").mousemove(function (dot) {
<Сюда пишем необходимые действия>
});

За координаты отвечают dot.pageX и dot.pageY.

Как создать нечто похожее у себя

Дальше уже дело вкуса. Например, если хотите проверить это у себя и как-то дорабатывать скрипт (иногда так проще понять, что и как работает), можно поступить следующим образом:

1) Создайте пустую страничку html. Важно, чтобы там была первоначальная разметка, но в тегах <body> текст нам сейчас не нужен. Так как мы будем писать скрипт. Кто-то даже первый свой скрипт.

2) Создаем файл script.js

В него записываем следующие строки

$(document).ready(function() {
$("body").prepend("<div class='js-ex'><p class='p-ex'></p></div>");
$("body").mousemove(function (dot) {
$(".p-ex").html('X:'+dot.pageX+', Y:'+dot.pageY);
});
});

3) Создаем файл таблиц стилей style.css и записываем туда следующие стили

.js-ex{
 background: #000;
 width: 80px;
 height: 100px;
 display: block;
 padding: 0 10px;
}
.p-ex{
 color:red;
 font-size: 10px;
}

4) Прописываем в нашем html-файле пути к файлу стилей и скрипту. Если этого не сделать, ничего работать не будет!

Если у вас все файлы лежат в одной папке, то достаточно будет между тегами <head></head> добавить следующие строки

<link rel="stylesheet" href="style.css" type="text/css" />
<script src="script.js" type="text/javascript">
Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *