Работа с событиями в jQuery. Часть 2

Работа с событиями в jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. В частности, мы познакомимся с некоторыми из событий, связанными с движением курсора мыши. Приступим.

Итак, первый метод, с которым мы познакомимся, отвечает за событие движения мыши — это метод mousemove. Давайте посмотрим пример. Создадим произвольный блок:

И инициализируем для него отслеживание события движения мыши:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Работа с событиями в jQuery

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Давайте теперь попробуем решить поставленную задачу. Решение может быть примерно таким:

Блок подсказки изначально скрыт и по задумке он должен появиться в момент движения мыши внутри элемента с классом block. Также для блока подсказки мы задали абсолютное позиционирование, чтобы управлять в последующем его координатами. И небольшой скрипт:

Теперь при начале движении мыши внутри блока мы делаем следующее: получаем в координаты X и Y в каждый конкретный момент движения; с помощью метода css изменяем стили блока подсказки.

Работа с событиями в jQuery

Данный скрипт пока что далек от идеала. Например, курсор мыши при желании может «залезть» на блок подсказки. Также блок подсказки не скрывается, когда курсор мыши уходит из основного блока. Собственно, первую проблему можно решить прямо сейчас, для этого просто достаточно немного увеличить значения переменных top и left, скажем на 15 пикселей:

Теперь курсор мыши не сможет поймать блок подсказки. Как решить вторую проблему мы узнаем уже в следующей части статьи. Заодно познакомимся еще с несколькими методами для работы с событиями. На этом мы завершим текущую статью. Исходники к статье можно скачать по ссылке. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree