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

Для начала мы подключим фреймворки и решим проблему совместимости с IE9, размещаем следующий код между тегами head:

Как вы заметили мы используем скрипт query.pointpoint, который и служит непосредственно для работы обозначения. При вызове  pointPoint() создается обработчик события для перемещения курсора мыши.

В нем плагин вычисляет положение и поворот указателя с помощью тригонометрических функций:

Также используется плагин transform.js, который обеспечивает вращения CSS3 в браузерах, которые поддерживают трансформации CSS3 (плагин не работает в IE678). Сам по себе плагин очень прост в использовании. Нужно вызвать его для элемента, на который надо указывать.  Плагин автоматически найдет элемент и выведет указатель при движении курсора мыши. Также можно использовать объект аргументов с двумя опциями – “class” и “distance“:

В выше приведенном коде добавляется указатель на элемент с идентификатором “pushButton“. Аргументы во втором примере устанавливают пользовательский класс для указателя (если вы хотите использовать свой стиль) и помещают его на большей дистанции от курсора мыши. Стиль по умолчанию определен в файле jquery.pointpoint.css.

Когда вы вызываете плагин, он возвращает объект jQuery. Поэтому, вы можете использовать цепочку вызовов. Но есть один недостаток. Объект имеет специальный метод для уничтожения destroyPointPoint(). Вот и все! Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.