Плагин 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”.
