Обзор
эффектов Spry
Эффекты Spry — это визуальные усовершенствования, которые с помощью
JavaScript можно применить почти к любому элементу HTML-страницы.
Эффекты часто используются для
выделения данных, создания анимации или временного визуального
изменения элемента страницы.
Эффекты можно применять к HTML- элементам без использования
дополнительных специальных тегов.
Примечание. Чтобы применить эффект к элементу, нужно его выбрать или он
должен иметь
идентификатор. Например, при применении выделения цветом к тегу div,
который в данный момент не выбран, он должен иметь идентификатор. Если
у элемента еще нет
идентификатора, его следует добавить в HTML-код.
Эффекты могут изменять прозрачность, масштаб, положение элемента, а
также свойства стиля, например, цвет фона. Можно создавать интересные
визуальные эффекты, комбинируя
два или несколько свойств.
Так как эти эффекты основаны на технологии Spry, при щелчке элемента с
эффектом динамически обновляется только этот элемент, а не вся
HTML-страница.
Spry включает следующие эффекты:
Появление/Растворение
Заставляет элемент появляться или растворяться.
Подсветка
Изменяет цвет
фона элемента.
Жалюзи
Имитирует жалюзи
окна, которое ходит вверх или вниз для скрытия или открытия элемента.
Скольжение
Перемещает
элемент вверх или вниз.
Расширить/Сжать
Увеличивает или уменьшает размер элемента.
Тряска
Имитирует тряску
элемента слева направо.
Всплеск
Заставляет
элемент исчезать в верхнем левом углу страницы.
Важная информация. При использовании эффекта в представлении «Код» в
файл добавляются различные строки кода. Одна строка определяет файл
«SpryEffects.js», необходимый
для включения эффектов. Не удаляйте эту строку из кода, иначе эффекты
не будут работать.
Полный обзор эффектов Spry, доступных в платформе Spry, см. по адресу:
www.adobe.com/go/learn_dw_spryeffects_ru.
Применение эффекта
«Появление/Растворение»
Примечание. Этот элемент можно использовать с любым HTML-элементом, за
исключением applet, body, iframe, object, tr, tbody, th.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На
панели
Поведение («Окно» > «Поведение») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Появление/Растворение».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
4 В окне «Длительность эффекта» задайте продолжительность эффекта в
миллисекундах.
5 Выберите эффект для применения: «Растворение» или «Появление».
6 В окне «Растворение от» задайте процент непрозрачности эффекта при
его появлении.
7 В окне «Растворение от» задайте конечный процент непрозрачности.
8 Выберите «Переключать эффекты», если требуется, чтобы эффект был
обратным, переходящим от растворения к появлению и обратно при
последовательных нажатиях.
Пример
эффекта
Применение эффекта «Жалюзи»
Примечание. Этот эффект можно использовать только с такими
HTML-элементами: address, dd, div, dl, dt, form, h1, h2, h3, h4, h5,
h6, p, ol, ul, li, applet, center, dir,
menu, pre.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Жалюзи».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
4 В окне «Длительность эффекта» задайте продолжительность эффекта в
миллисекундах.
5 Выберите эффект для применения: «Жалюзи вверх» или «Жалюзи вниз».
6 В окне «Жалюзи вверх от/Жалюзи вниз» задайте начальную точку
прокрутки жалюзи в виде процентного соотношения или номера пиксела. Эти
значения отсчитываются от верхней
части элемента.
7 В окне «Жалюзи вверх от / Жалюзи вниз до» задайте конечную точку
прокрутки жалюзи в процентах или пикселах. Эти значения отсчитываются
от верхней части элемента.
8 Выберите «Переключать эффекты», если требуется, чтобы эффект был
обратным, с прокруткой вверх и вниз при последовательных нажатиях.
Пример
эффекта
Применение эффекта
«Расширить/Сжать»
Примечание. Этот эффект можно использовать с такими HTML-элементами:
address, dd, div, dl, dt, form, p, ol, ul, applet, center, dir, menu,
pre.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Расширить/Сжать».
3 Выберите идентификатор элемента во всплывающем меню конечных
элементов. Если элемент уже выделен, выберите <Выделенный
фрагмент>.
4 В окне «Длительность эффекта» задайте продолжительность эффекта в
миллисекундах.
5 Выберите эффект для применения: «Расширение» или «Сжатие»
6 В окне «Расширить/Сжать от» задайте размер элемента в начале эффекта.
Это значение задается в процентах или пикселах.
7 В окне «Расширить/Сжать до» задайте размер элемента в конце эффекта.
Это значение задается в процентах или пикселах.
8 При выборе пикселов либо для окна «Расширить/Сжать от», либо для
«Расширить/Сжать до» становится видимым поле ширины и высоты. Элемент
расширится или сожмется
пропорционально, в зависимости от выбранного параметра.
9 Выберите куда пойдет расширение или сжатие элемента, в верхний левый
угол страницы или в центр.
10 Выберите «Переключать эффекты», если требуется, чтобы эффект был
обратным, с расширением и сжатием при последовательных нажатиях.
Пример
эффекта
Применение эффекта «Высвечивание»
Примечание. Этот элемент можно использовать с любым HTML-элементом, за
исключением applet, body, frame, frameset, noframes.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Высвечивание».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
4 В окне «Длительность эффекта» задайте продолжительность эффекта в
миллисекундах.
5 Выберите цвет подсветки в начале эффекта.
6 Выберите цвет подсветки в конце эффекта. Этот цвет сохраняется только
на время, заданное в окне «Длительность эффекта».
7 Выберите цвет элемента после окончания подсветки.
8 Выберите «Переключать эффекты», если требуется, чтобы эффект был
обратным, с чередованием цветов подсветки при последовательных нажатиях.
Применение эффекта «Тряска»
Примечание. Этот эффект можно использовать с такими HTML-элементами:
address, blockquote, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4,
h5, h6, iframe, img,
object, p, ol, ul, li, applet, dir, hr, menu, pre, table.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Тряска».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
Пример
эффекта
Применение эффекта «Скольжение»
Чтобы эффект «Скольжение» правильно работал, целевой элемент должен
быть помещен в тег-контейнер, имеющий уникальный идентификатор. Это
может быть тег blockquote, dd,
form, div или center.
Тег целевого элемента может быть следующим: blockquote, dd,div, form,
center, table, span, input, textarea, select или image.
1 Выделите тег-контейнер элемента, к которому необходимо применить
эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Скольжение».
3 Выделите идентификатор тега-контейнера в меню целевого элемента. Если
контейнер уже выделен, выберите выделенный фрагмент.
4 В окне «Длительность эффекта» задайте продолжительность эффекта в
миллисекундах.
5 Выберите эффект для применения: «Скольжение вверх» или «Скольжение
вниз»
6 В поле «Скольжение вверх от» определите начальную точку скольжения в
процентах или в пикселах.
7 В поле «Скольжение вверх до» определите конечную точку скольжения в
процентах или пикселах (больше нуля).
8 Выберите «Переключать эффекты», если требуется, чтобы эффект был
обратным, со скольжением вверх и вниз при последовательных нажатиях.
Применение эффекта «Всплеск»
Примечание. Этот эффект можно использовать только с такими
HTML-элементами: address, dd, div, dl, dt, form, img, p, ol, ul,
applet, center, dir, menu, pre.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите в меню пункт «Эффекты» > «Всплеск».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
Добавление дополнительного
эффекта
Чтобы добиться интересных результатов, с одним элементом можно связать
несколько эффектов.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») нажмите кнопку «+» и
выберите эффект в меню «Эффекты».
3 Выберите идентификатор элемента из меню конечных элементов. Если
элемент уже выделен, выберите <Выделенный фрагмент>.
Удаление эффекта
Можно удалить один или несколько эффектов из элемента.
1 Выберите содержимое или элемент макета, к которому требуется
применить эффект (необязательно).
2 На панели «Поведения» («Окно» > «Поведения») выберите эффект,
который необходимо удалить из списка поведений.
3 Выполните одно из следующих действий.
• Нажмите кнопку «Удалить событие» в строке заголовка вложенной панели
«(-)».
• Щелкните поведение правой кнопкой мыши (Windows) или щелкните его,
удерживая нажатой клавишу «Control» (Macintosh), и выберите «Удалить
поведение».
Вернуться к: Страницы Spry
