Подсказки для изображений с помощью jQueryНа фотосайтах можно заметить множество изображений, которые организованы в различного рода галереи. В этих галереях, зачастую используются своеобразные подсказки, которые информируют пользователя о содержании. В данном уроке мы рассмотрим, как создать красивый эффект для подсказок с помощью jquery и css. Идея заключается в формировании покрывающего полупрозрачного слоя, который выдвигается поверх картинки со стороны перемещения курсора мыши. При дальнейшем движении курсора покрывающий слой сдвигается вслед за ним.

 

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

Как Вы заметили, все достаточно просто, теперь рассмотрим, стилизацию с помощью CSS, Пункт списка будет смещаться влево и позиционируется относительно элементов, потому что покрывающий позиционируется абсолютно:

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

Подсказки для изображений с помощью jQuery

Несмотря на то, что все может быть выполнено в JavaScript, но лучше иметь отдельные стили, чтобы можно было легко настраивать внешний вид:

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

Теперь поясним, события ‘mouseenter’ и ‘mouseleave’ привязываются к пункту списка. С помощью функции _getDir определяем направление перемещения курсора мыши в область элемента (область виртуально делится на четыре треугольника для определения направления).

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.