Фильтры статич и динамич
.pdf
Проявление изображения
Для того чтобы решить обратную задачу, заставить скрытое изображение проявляться после нажатия на кнопку, можно воспользоваться сценарием:
Верхнее изображение задано без фильтров. Переход применен к нижнему изображению.
<html>
<head><title> Фильтр blendTrans. Появление </title> <script>
function myTestTrans1()
{
p1.filters.blendTrans.Apply();
p1.filters.blendTrans.Play();
p1.style.visibility="visible";
}
</script>
</head>
<body>
<h5> Появление изображения </h5>
<img src="firewks1.jpg" style="width:200; height:200"> <br>
<input type="button" value="Показать" onclick='myTestTrans1()'> <br>
<img src="firewks1.jpg" id="p1"
style="filter: blendTrans (duration=300); width:200; height:200; visibility: hidden;"><br><br> </body></html>
Рис. 12.9. Появление изображения
11
Эффект проявления одного изображения сквозь другое
Напишем сценарий, реализующий следующий визуальный эффект: одно изображение начинает исчезать, одновременно проявляется другое изображение. Если теперь щелкнуть мышью на изображении, второе изображение станет прозрачным, сквозь него проявится первое изображение.
<html>
<head><title> Переход blendTrans. Чередование изображений </title> <script>
var fr =0
function myTestTrans1 ()
{
p1.filters.blendTrans.Apply(); if (fr==0)
{fr = 1; p1.src="firewks1.jpg" } else
{fr=0; p1.src="firewks2.jpg"} p1.filters.blendTrans.Play ()
}
</script>
</head>
<body>
Чередование изображений с эффектом появления
<img src="firewks2.jpg" id="p1" style="filter: blendTrans (duration=50); height:200; width:200" onclick='myTestTrans1()'>
</body>
</html>
По значению глобальной переменной fr определяется, к какому из изображений применяется переход.
12
Визуальные эффекты при смене состояний
Переход revealTrans позволяет попадать из одного визуального состояния в другое разными способами. Тип перехода задается значением свойства transition.
Зададим в документе две кнопки, которые управляют появлением и исчезновением объекта. Если бы использовался переход biendTrans, объекты как бы растворялись в документе, а затем появлялись. Задание типа перехода позволяет попадать из одного состояния в другое с разными визуальными эффектами. Один из них продемонстрирован на рис. 12.11.
Рис. 12.11 Визуальные эффекты при появлении и исчезновении объекта
<html>
<head><title> Фильтр revealTrans </title> <script>
function TestTransRev(n)
{ p1.filters.revealTrans.Apply(); p1.filters.revealTrans.Play();
if (n==1)
p1.style.visibility = "visible"; else
p1.style.visibility = "hidden";} </script>
</head>
<body>
<img src="firewks1.jpg" id="p1"
style="filter: revealTrans (duration=300,transition=5);"> <br><br>
<input type="button" value=”Показать" onclick='TestTransRev(1)'> <input type="button" value="Исчезнуть" onclick='TestTransRev(2)'> </body>
</html>
13
В предыдущем примере визуальные эффекты применялись к одному изображению. Интересный эффект получается, когда при выполнении перехода одно изображение заменяется другим. Для этого надо в предыдущем сценарии сделать небольшое изменение. При выполнении перехода каждый раз необходимо менять изображение, к которому применяется переход.
На рис. 12.12 изображен момент смены одного изображения другим.
<html>
<head><title> Фильтр revealTrans и два объекта </title> <script>
function TestTransRev(n)
{p1.filters.revealTrans.Apply();
p1.filters.revealTrans.Play(); if (n==1) {p1.style.visibility="visible"; p1.src="firewks1.jpg"; } else
{p1.src="firewks2.jpg";
}
}
</script>
</head>
<body>
<img src="firewks1.jpg" id="p1" width=200 height=200 style="filter: revealTrans (duration=30,transitional);"> <br><br>
<input type="button" value="Показать" onclick='TestTransRev(1)'> <input type="button" value="Исчезнуть" onclick='TestTransRev (2) '> </body></html>
14
Тип и длительность перехода
Напишем сценарий, который позволяет пользователю выбрать тип перехода и задать длительность перехода с помощью элементов управления формы. Для выбора типа перехода будем использовать список, для задания длительности — текстовое поле.
Визуальные эффекты перехода revealTrans:
Использование фильтров позволяет получить интересные мультимедийные эффекты и сделать страницы более привлекательными.
<html>
<head>
<title> Визуальные эффекты перехода revealTrans </title> <script>
var typevis =0 // тип визуального эффекта, выбранного пользователем var timevis = 8 // время выполнения эффекта
// функция появления и исчезновения изображения с заданным эффектом function TestTransRev(n)
{p1.filters.revealTrans.Apply();
p1.filters.revealTrans.transition=typevis;
p1.filters.revealTrans.duration=timevis;
p1.filters.revealTrans.Play(); if (n==1)
p1.style.visibility = "visible";
15
else
p1.style.visibility = "hidden";
}
//выбор типа визуального эффекта function tvis (n)
{typevis= Number(n)}
//выбор времени выполнения--визуального эффекта function ttime (n)
{ timevis= Number(n)} </script>
</head>
<body>
<img src="firewks1.jpg" id="p1"
style="filter: revealTrans (duration=30, transition=0));"> <br><br>
<FORM name="form1">
<input type="button" value="Показать" onclick='TestTransRev(1)'> <input type="button" value="Исчезнуть" onclick='TestTransRev(2)'> <br>
Выберите тип визуального эффекта и для просмотра нажмите на соответствующую кнопку <BR> <select name="forma" size=1 onChange="tvis(form1.forma.value)">
<option value=0>постепенно стягивающийся прямоугольник <option value=l> постепенно растягивающийся прямоугольник <option value=2> постепенно стягивающийся круг
<option value=3> постепенно растягивающийся круг <option value=4>развертывание снизу вверх <option value=5> развертывание сверху вниз <option value=6> развертывание слева направо <option value=7> развертывание справа налево
<option value=8>вepтикaльныe жалюзи
<option vаluе=9>горизонтальные жалюзи
<option value=10>пpoявлeниe в шахматном порядке поперек <option value=11>пpoявлeниe в шахматном порядке сверху вниз <option value=12>пpoявлeниe случайных участков
<option value=13>развертывание с двух сторон к центру <option value=14> развертывание от центра к боковым сторонам <option vа1ие=15>развертывание сверху и снизу к центру
</select>
<br>
Вы можете изменить время длительности эффекта
<input type="text" value=30 name="t" size=3 onChange="ttime (form1.t.value)"> </FORM>
</body>
</html>
16