Тень с использованием jQuery: плагин Drop Shadow

Плагин jquery.dropshadow.js для библиотеки jQuery позволяет добавить тень элементам страницы. Как это выглядит, можно посмотреть здесь (обратите внимание, что изображение шестеренки можно перетаскивать мышкой). Для начала подключаем в разделе head HTML-страницы необходимые файлы:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.dropshadow.js"></script>

Синтаксис:

$(selector).dropShadow(options)// создает новую тень
$(selector).redrawShadow();       // изменяет существующую тень
$(selector).removeShadow();       // удаляет тень
$(selector).shadowId();           // возвращает ID тени

Параметры dropShadow():

left    : integer (default = 4)
top     : integer (default = 4)
blur    : integer (default = 2)
opacity : decimal (default = 0.5)
color   : string (default = "black")
swap    : boolean (default = false)
  • Параметры left и top задают расположение тени. Если left и top равны нулю, тень расположена за элементом страницы, если значения положительные - тень будет справа снизу, если отрицательные - слева сверху.
  • Параметр blur задает размытие тени. Если blur=0 получим резкую тень, значение один или два создает нормальную тень, значение три или четыре создает сильно размытую (мягкую) тень.
  • Параметр opacity задает прозрачность тени. Как правило, имеет значение меньше единицы.
  • Параметр color задает цвет тени (строка названия цвета или шестнадцатеричное значение). Не применяется к прозрачным изображениям.
  • Параметр swap используется для создания специальных эффектов (рельеф, гравировка).

Тени, которые создает плагин, не связаны с оригинальными элементами, таким образом, если оригинальные элементы изменятся, тени останутся без изменений. Если оригинальные элементы перемещаются или изменяют размеры, надо обработать эти события вручную. Тени могут быть изменены с помощью метода redrawShadow() или удалены с помощью метода removeShadow(). Метод redrawShadow() метод использует те же самые параметры, что и dropShadow(). Чтобы изменить параметры тени, сначала надо удалить тень, а затем создать новую.

Метод dropShadow() метод возвращает jQuery-коллекцию новых теней (созданных плагином новых элементов страницы). Их можно сохранить для дальнейшей обработки:

var myShadow = $("#myElement").dropShadow();

Можно получить ID тени по ID оригинального элемента:

var myShadowId = $("#myElement").attr("shadowId");

или

var myShadowId = $("#myElement").shadowId();

Если оригинальный элемент не имеет уникального ID, плагин его добавит. ID тени создается на основе ID оригинала: если уникальный ID элемента - “myElement”, то ID тени тени будет “myElement_dropShadow”.

Скачать исходные коды

Оставьте свой отзыв