|
|
|
В этом примере к элементу IMG применяются два фильтра . Первый фильтр смазывает изображение (blur, эффект движения) с определенной интенсивностью (strength). Второй фильтр вертикально отражает (flipV) изображение (В моем браузере flipV отображает горизонтально, а flipH – вертикально!? А в Вашем?). Каждый фильтр может иметь набор необязательных параметров, чтобы определить точный характер эффекта (например, цвет или продолжительность). Некоторые фильтры, например, FlipV и FlipH, могут не иметь параметров (хотя все фильтры и переходы имеют свойство enabled, и все превращения имеют свойство Duration). Можно применять несколько фильтров так, как в вышеупомянутом примере FlipV и Blur фильтры применяются в комбинации к IMG. К каким HTML элементам можно применять мультимедиа эффекты?Визуальные фильтры могут применяться только к HTML элементам, которые являются элементами управления (controls; далее по тексту, просто элемент). Элемент управления определяет прямоугольное пространство внутри окна браузера, когда окно просмотра прорисовывает Web документ. Элементы управления не могут быть оконными (windowed), типа IFRAME. Эти элементы управления HTML таковы:
К неоконным (windowless) элементам управления, типа структурированной графики (structured graphics) и элементов управления ActiveX (ActiveXTM Controls), можно также применять filter атрибуты. Фильтры следуют стандартной схеме наследования CSS атрибутов (если она существует для объекта), кроме исключений, отмеченных ниже. Фильтры игнорируются для любых позиционируемых элементов, вложенных внутри непозиционируемых, типа позиционируемого SPAN внутри непозиционируемого DIV. Самое простое решение: всегда устанавливать или определять ширину для вашего самого нижнего (outermost) элемента. К элементам и объектам-окнам (windowed), к которым не могут применяться фильтры, относятся апплеты Java, IFRAME, элементы форм (SELECT и OPTION), элементы параграфа (P), заголовки (Hn), и логические текстовые элементы стиля (EM и STRONG). Доступ к фильтрам из сценариевДля каждого элемента доступна коллекция filters, так что сценарий имеет доступ к отдельным фильтрам элемента. К коллекции фильтров можно обращаться, как и к любой другой коллекции объектной модели. Например, следующая строка сценария адресует первый фильтр в коллекции фильтров элемента с id=theDiv. Подобно другим коллекциям объектной модели, коллекция filters поддерживает несколько видов доступа.
<IMG id=sample SRC="sample.jpg"
STYLE="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10);
position: relative">
<SCRIPT LANGUAGE="JavaScript">
sample.filters.alpha // подобъект
sample.filters["alpha"] // именованный индекс
sample.filters[0] // числовой индекс (filters как массив)
sample.filters.item(0) // числовой индекс (filters как объект)
</SCRIPT>
Доступ с помощью числового индекса полезен, когда применяется больше чем один фильтр одного типа или когда тип фильтра не известен заранее (например, если он установливается через сценарий или связывание данных). Это особенно важно для фильтров и превращений, которые имеют общие свойства и методы, типа color и play. Фильтры можно рассматривать как подобъекты элементов, к которым они применяются. Подобно другим объектам, они предоставляют свойства и методы для изменения их внутреннего состояния. В следующем примере непрозрачность элемента динамически изменена изменением свойства opacity в Alpha фильтре.
<img id=sample src=sample.jpg style="filter: alpha(opacity=50)">
<script language="javascript">
function foo(){
sample.filters.alpha.opacity += 10;
}
</script>
Строка ФильтраОбъект-свойство элемента style также имеет свойство filter. Это - строка для чтения/записи, которая может использоваться, чтобы управлять CSS фильтрами элемента непосредственно. Например, при использовании DIV, определенного ниже, следующий код: <div id=mydiv style="height:50; width:50; filter:wave(strength=100)
revealTrans(transition=3 duration=4)"> This is a div </div>
<script>
...
alert(mydiv.style.filter)
...
</script>
вызвыл бы функцию alert со следующей строкой: wave(strength=100) revealTrans(transition=3 duration=4) Запись в это свойство особенно полезна для смены фильтра элемента динамически. Обратите внимание, что запись в это свойство переписывает существующее значение и браузер перерисовывает новую строку немедленно. Следующий пример добавляет фильтр FlipH к коллекции на лету. <DIV ID="mydiv" STYLE="height:50; width:50; filter:wave(strength=100)
revealTrans(transition=3 duration=4)"> This is a div </DIV>
<SCRIPT>
...
mydiv.style.filter += " fliph()"
...
</SCRIPT>
После изменения, новая строка фильтра теперь выглядела бы следующим образом: wave(strength=100) revealTrans(transition=3 duration=4) fliph() Любые следующие изменения строки фильтра будут менять уже эту новую строку. Примечание. Как уже отмечалось, изменение фильтров возможно также через объектную модель, т.е. через обращения к их методам и свойствам. Для улучшения эффективности, настоятельно рекомендуется, чтобы Вы обращались к CSS фильтрам через объектную модель всякий раз, когда это возможно, и только тогда обращались к строке фильтра, когда объектные возможности модели не адекватны. Даже в случае динамического добавления фильтров рекомендуется в большинстве случаев добавить фильтр в начальных атрибутах фильтра листа стилей со свойством enabled установленным в "false". Когда необходимо, чтобы фильтр был применен к элементу, нужно просто установить из сценария enabled=true для данного фильтра. (Заметьте, что в атрибутах стиля filter необходимо использовать кавычки для true/false, в то время как в сценарии кавычки употреблять не надо. Чтобы не запутаться с кавычками, можно применять числовые значения для enabled без кавычек (false=0, true=1).) Пример в листинге ниже показывает, как изменить фильтр из сценария, изменяя свойство enabled фильтров.
...
<IMG id=sample SRC="sample.gif" STYLE="filter: xray(ENABLED=0)
flipH(ENABLED=0) flipV(ENABLED=0)
alpha(opacity=50, ENABLED=0) blur(amount=10, ENABLED=0)
chroma(color=black, ENABLED=0) dropShadow(color=gray, ENABLED=0)
glow(strength=10, color=gray,ENABLED=0)
gray(ENABLED=0) invert(ENABLED=0) light(ENABLED=0)
mask(color=blue,ENABLED=0) shadow(color=gray, ENABLED=0)
wave(strength=8, freq=3, lightstrength=20, add=0, phase=90, ENABLED=0);">
<br>
<input type=button value="next filter" onclick="next(1)">
<input type=button value="prev filter" onclick="next(-1)">
<SCRIPT LANGUAGE="JavaScript">
var cf=0;
function next(dir)
{
sample.filters[cf].enabled=false; // или sample.filters[cf].enabled=0;
cf+=dir;
if (cf>=sample.filters.length) cf=0;
if (cf<0) cf=sample.filters.length-1;
sample.filters[cf].enabled=true; // или sample.filters[cf].enabled=1;
}
</SCRIPT>
...
(см. как это работает) Особенности дизайна фильтровНиже приведены некоторые особенности, которые надо учитывать при применении фильтров.
мобильные кондиционеры Panasonic центр флебологии, трофических язв.
|
 |
||||
Мультимедийные эффекты |
||||||
|
||||||
