От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. В частности, мы познакомимся с некоторыми из событий, связанными с движением курсора мыши. Приступим.
Итак, первый метод, с которым мы познакомимся, отвечает за событие движения мыши — это метод mousemove. Давайте посмотрим пример. Создадим произвольный блок:
|
1 |
<div style="border: 1px solid #ccc; width: 500px; height: 300px;"> |
И инициализируем для него отслеживание события движения мыши:
|
1 2 3 |
$('div').mousemove(function(){ console.log('Движение'); }); |
Теперь, двигая мышь внутри блока, мы можем наблюдать, как изменяется счетчик вызова события в консоли. При малейшем движении мыши внутри элемента значение счетчика будет увеличиваться:
Теперь при движении мыши на элементе мы можем сделать что-то полезное, например показывать всплывающую подсказку, которая будет двигаться вслед за курсором мыши. Для того, чтобы реализовать такую задачу, нам, конечно же потребуется объект события и его свойства pageX и pageY, в которых хранятся координаты курсора:
|
1 2 3 |
$('div').mousemove(function(e){ console.log('X: ' + e.pageX, 'Y: ' + e.pageY); }); |
Давайте теперь попробуем решить поставленную задачу. Решение может быть примерно таким:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .block{ border: 1px solid #ccc; width: 500px; height: 300px; } .tooltip{ position: absolute; padding: 5px; background: #555; color: #fff; border-radius: 5px; font: 13px Verdana; box-shadow: 0 0 10px rgba(0, 0, 0, 0.7); display: none; width: 180px; } </style> <div class="block"></div> <div class="tooltip">Подсказка</div> |
Блок подсказки изначально скрыт и по задумке он должен появиться в момент движения мыши внутри элемента с классом block. Также для блока подсказки мы задали абсолютное позиционирование, чтобы управлять в последующем его координатами. И небольшой скрипт:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(function(){ $('.block').mousemove(function(e){ var top = e.pageY, left = e.pageX; $('.tooltip').css({ "left": left, "top": top, "display": "block" }); }); }); |
Теперь при начале движении мыши внутри блока мы делаем следующее: получаем в координаты X и Y в каждый конкретный момент движения; с помощью метода css изменяем стили блока подсказки.
Данный скрипт пока что далек от идеала. Например, курсор мыши при желании может «залезть» на блок подсказки. Также блок подсказки не скрывается, когда курсор мыши уходит из основного блока. Собственно, первую проблему можно решить прямо сейчас, для этого просто достаточно немного увеличить значения переменных top и left, скажем на 15 пикселей:
|
1 2 |
var top = e.pageY + 15, left = e.pageX + 15; |
Теперь курсор мыши не сможет поймать блок подсказки. Как решить вторую проблему мы узнаем уже в следующей части статьи. Заодно познакомимся еще с несколькими методами для работы с событиями. На этом мы завершим текущую статью. Исходники к статье можно скачать по ссылке. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!
