Динамические фильтры в html

Динамические фильтры HTML

В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В теге применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в теге>.


Динамический фильтр



height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans»>
height : 200; width: 300; visibility : hidden» SRC=world. gif >

Динамическое преобразование картинки с помощью фильтра

Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»

Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тегом ; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тегом ; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0).

Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image 1. filters (0) .Transition=3 , то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):

Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»

При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.

Тип преобразования 23 — случайный выбор и применение одного из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр сработает, когда пользователь загрузит вашу страницу.
Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр — продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.


Динамический фильтр



height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans «>
height : 200; width: 300 ; visibility :
hidden» SRC=world. gif >

Динамическое преобразование картинки с помощью фильтра


Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.

При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в теге . Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.

Источник

Иллюстрированный самоучитель по Web-графике

Динамическое преобразование картинки с помощью фильтра:

Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»

Заметим, что Image1 – это имя (идентификатор) элемента-контейнера, заданного тэгом ; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод apply(), который не поддерживается элементом, созданным тэгом ; filters – коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters(0).

Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image1.filters(0).Transition=3, то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):

Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»

При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.

Тип преобразования 23 – случайный выбор и применение одного из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр сработает, когда пользователь загрузит вашу страницу.

Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр – продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.

Источник

Иллюстрированный самоучитель по Web-графике

Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает Web-страницу. Есть несколько способов преобразования. Эти способы заранее определены, поэтому от вас лишь требуется указать номер выбранного способа. Ниже приведена таблица с названиями и номерами превращений.

Тип превращения Номер фильтра
Стягивающийся прямоугольник 0
Расширяющийся прямоугольник 1
Стягивающийся круг 2
Расширяющийся круг 3
Стирание вверх 4
Стирание вниз 5
Стирание вправо 6
Стирание влево 7
Вертикальные жалюзи 8
Горизонтальные жалюзи 9
Сужающиеся клетки 10
Закрывающаяся шахматная доска 11
Случайный наплыв 12
Вертикальное деление внутрь 13
Вертикальное деление наружу 14
Горизонтальное деление внутрь 15
Горизонтальное деление наружу 16
Стирание влево вниз 17
Стирание влево вверх 18
Стирание вправо вниз 19
Стирание вправо вверх 20
Случайные горизонтальные полосы 21
Случайные вертикальные полосы 22
Случайный выбор номера (из диапазона 0-22) 23

В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В тэге применен динамический фильтр reveALTrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в тэге >.

Источник

Динамические фильтры

С их помощью их можно к элементам страницы применять такие эффекты, как размытие, инвертирование, прозрачность, отражение и т.д.

Статические фильтры можно применять к элементам страницы при помощи CSS:

Таким образом обычно применяют фильтры, действие которых не

будет меняться во времени.

Если нужно изменять какие-то свойства фильтров, то при этом используют JavaScript:

имя_элемента.filters.название_фильтра.свойство = «значение»; Объект filters содержит все свойства и методы примененных к элементу фильтров.

Если посредством скрипта необходимо к элементу применить сам фильтр, а не его свойства, то следует пользоваться таким синтаксисом:

элемент.style.filter = «название_фильтра(свойство=значение. )»

Фильтр устанавливает прозрачность элемента.

  • 0 — Сплошная прозрачность
  • 1 — Линейная градиентная прозрачность
  • 2 — Радиальная градиентная прозрачность
  • 3 — Прямоугольная градиентная прозрачность

Фильтр — эффект тени. Фильтр применяется только к элементам, содержащим текст.

enabled false не применяется, true — применяется.
color Стиль — цвет тени.
offX Расстояние в пикселах от элемента до тени по оси X. Положительные — тень вправо, отрицательные — влево.
offY То же по оси Y. Положительные — тень вниз, отрицательные — вверх.

Горизонтальный и вертикальный поворот

Инвертирует цвета (элемента).

Размытие элемента под указанным углом.

enabled true или false
direction Угол размытия. Угол кратен 45 градусам.
strength Сила размытия. Диапазон 0 — 100;

Фильтр — эффект размытой тени.

glow filter (свечение)

xray filter (x-лучи)

Динамические фильтры, в отличие от статических, предназначены для плавного перехода элемента из одного состояния видимости в другой за определенный промежуток времени.(Статическими тоже можно сделать плавный переход, но это требует больших усилий нежели воспользоваться динамическими)

Существует только два динамических фильтра: blendTrans и revealTrans.

Рассмотрим сначала фильтр blendTrans и начнем с его методов и свойств

  • 0 — если фильтр остановлен
  • 1 — если фильтр применен
  • 2 — если фильтр выполняется

Ниже представлен пример, где почти все методы и свойства этого фильтра применены.

Источник

Читайте также:  Java access remote files
Оцените статью