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

РЕКЛАМА

Разное

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

Следующий HTML код – пример фильтра Reveal Transition. В выпадающем списке приводятся типы превращений фильтра, при смене которых эффект отображается на картинке. Через определенное время (3000 мсек) эффект проигрывается вновь, чтобы восстановить прежнее состояние изображения. Для изменения визуального представления меняется свойство стиля visibility на hidden (невидимость). При этом верхняя картинка, полностью закрывающая нижнюю, начинает изчезать (применением метода play), проявляя под собой ниже лежащее изображение. При восстановлении visibility присваивается значение visible (видимость) и верхняя картинка восстанавливает свой вид, закрывая нижнюю.


<HTML>

<HEAD><TITLE>Transition reveal Демо</TITLE>
</HEAD>

<BODY>

<SCRIPT language="JavaScript">
var wait=false;
var t;
var tipText;
function startTrans(fselect){
   if ((wait && fselect)
	||
	SampleID.filters.revealTrans.status != 0)
		type.selectedIndex=t;
   else {
	t = type.options[type.selectedIndex].value;
	SampleID.filters.revealTrans.Apply();
	SampleID.filters.revealTrans.transition=t;
	SampleID.style.visibility =
		(SampleID.style.visibility == "hidden")?"visible":"hidden";
	SampleID.filters.revealTrans.Play()
   }
}
function FilterChange(){
  if (!wait){
	tipText=tip.innerText;
	tip.innerText="Ждите 3 сек";
	wait=true;
	setTimeout("startTrans(false)",3000);
  }
  else {
	wait=false;
	tip.innerText=tipText;
  }
}
</SCRIPT>

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


<p id=tip>Выберите тип из списка</p>
<select id=type onchange="startTrans(true)">
<option value=0>Box in
<option value=1>Box out
<option value=2>Circle in
<option value=3>Circle out
<option value=4>Wipe up
<option value=5>Wipe down
<option value=6>Wipe right
<option value=7>Wipe left
<option value=8>Vertical blinds
<option value=9>Horizontal blinds
<option value=10>Checkerboard across
<option value=11>Checkerboard down
<option value=12>Random dissolve
<option value=13>Split vertical in
<option value=14>Split vertical out
<option value=15>Split horizontal in
<option value=16>Split horizontal out
<option value=17>Strips left down
<option value=18>Strips left up
<option value=19>Strips right down
<option value=20>Strips right up
<option value=21>Random bars horizontal
<option value=22>Random bars vertical
<option value=23>Random
</select>
<br>
<div style="position:absolute; top:30; left:180; width:357; height:100;
	background-color:red; color:white; text-align:center;">
	<font size=+3><i>Microsoft</i><br>Internet Explorer 4.0</font>
</div>
<div id=SampleID style="position:absolute; top:30; left:180; width:357;
	height:100; background-color:blue; color:yellow; text-align:center;
	filter:revealTrans(duration=1);" onfilterchange="FilterChange()">
	<font size=+2>Фильтры-превращения предоставляет пожалуй
	лишь один браузер в мире!!!</font>
</div>

</BODY>

</HTML>

(см. результат). [> далее >]

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

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