ВЕБ-ШКОЛА: Мультимедийные эффекты для MS Internet Explorer 4.0+ (часть 7)

РЕКЛАМА

Разное

Мультимедийные эффекты
для MS Internet Explorer 4.0+
(часть 7)

Превращения

Превращения – визуальные фильтры, изменяющиеся во времени. Их роль – в визуальной смене представления элемента при переходе от одного состояния к другому. Общий метод для этого смена SRC атрибута изображения, чтобы изменить одно экранное изображение на другое. Предоставляемые Interener Explorer 4.0 превращения обеспечивают эффект анимации при переходе к новому изображению. Они могут также применяться, чтобы заставить элемент постепенно появляться или постепенно исчезать, изменяя свойство видимости (visibility).

Фильтр-превращение при необходимости может вызывать событие onfilterchange. (Внимание. Согласно документации Microsoft (MSDN Labrary January 2000), это событие "вызывается, когда визуальный фильтр меняет состояние или завершает превращение". Однако в моем браузере это событие вызывается только при завершении фильтром превращения.) Обработчик этого события может использовать свойство srcFilter объекта event для получения всей необходимой информации о фильтре, это событие вызвавшем. Таким образом, сценарий может знать, когда и какое фильтр-превращение завершился. (В моем браузере свойство event.srcFilter недоступно, т.к. равно null).

Превращения имеют свойства и методы для доступа из сценариев. Interner Explorer 4.0 предоставляет для использования два фильтра-превращения: blendTrans и revealTrans. Эти фильтры имеют три общих свойства: duration, enabled и status (revealTrans имеет еще одно свойство – transition, тип перехода). Свойство duration выражает длительность визуального превращения в секундах. Свойство enabled имеет тот же смысл, что и для обычных визуальных фильтров. Свойство status (доступное только для чтения) отражает состояние фильтра-превращения.

Методы фильтров-превращений позволяют применять и проигрывать эти фильтры. У них всего три общих метода: apply, play и stop. Общий метод применения превращений заключается в следующей схеме: 1) элемент, к которому применяется эффект, "замораживается" применением метода apply. В "замороженном" состоянии элемент не реагирует на смену визуального превращения; 2) меняется визуальное превращение (например, сменой атрибута src тэге IMG или стилевого свойства visibility); 3) элемент "размораживается" методом play. С этого момента в течении времени, определяемого свойством duration, происходит постепенное превращение текущего представления элемента во вновь назначенное. Это превращение определяется типом фильтра-превращения и типом превращения (для revealTrans). 4) В любое время сценарий может завершить превращение вызывом метода stop.

ВАКАНСИИ (Компьютеры, Интернет). Подробнее >>

Следующий пример показывает, как выполнить автоматическую смену между изображениями.


<HTML>
<HEAD><TITLE>Transition Blend Демо</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function startTrans(){
   if (SampleID.filters.blendTrans.status == 0){
       SampleID.filters.blendTrans.Apply();
       SampleID.style.visibility =
            (SampleID.style.visibility == "hidden")?"visible":"hidden";
       SampleID.filters.blendTrans.Play()
   }
}
</SCRIPT>
<p>Щелкните на изображении</p>
<div style="position:absolute; top:80; left:10; width:357; height:100;
	background-color:red; color:white; text-align:center;"
        onclick="startTrans()">
	<font size=+3><i>Microsoft</i><br>Internet Explorer 4.0</font>
</div>
<div id=SampleID style="position:absolute; top:80; left:10; width:357;
     height:100; background-color:blue; color:yellow; text-align:center;
     filter:blendTrans(duration=1);visibility:visible"
        onclick="startTrans()">
      <font size=+2>Фильтры-превращения предоставляет 
      пожалуй лишь один браузер в мире!!!</font>
</div>
</BODY>
</HTML>

(см. результат).

В приведенном примере показан фильтр Blend Transition, показывющий постепенное превращение одного изображения в другое. Второй фильтр Reveal Transition представляет собой множественную смену картинки, т.е. с помощью нескольких элементов; тип этих элементов задается свойством transition. В принципе, Blend Transition есть предельный случай Reveal Transition при уменьшении элементов до пикселей. [> далее >]

Каждому сайту - механизм организации собственной ленты новостей бесплатно! Подробнее >>

ПОИСК по сайту: