КАТЕГОРИИ: Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748) |
Динамические фильтры
Shadow Blur Invert Gray FlipH, flipV DropShadow filter Alpha filter Статических фильтры Фильтры С их помощью их можно к элементам страницы применять такие эффекты, как размытие, инвертирование, прозрачность, отражение и т.д. Статические фильтры можно применять к элементам страницы при помощи CSS: <элемент style="filter:название_фильтра(свойство=значение,...)"Таким образом обычно применяют фильтры, действие которых не будет меняться во времени. Если нужно изменять какие-то свойства фильтров, то при этом используют JavaScript: имя_элемента.filters.название_фильтра.свойство = "значение"; Объект filters содержит все свойства и методы примененных к элементу фильтров.Если посредством скрипта необходимо к элементу применить сам фильтр, а не его свойства, то следует пользоваться таким синтаксисом: элемент.style.filter = "название_фильтра(свойство=значение,...)"Фильтр устанавливает прозрачность элемента. Свойства
Фильтр - эффект тени. Фильтр применяется только к элементам, содержащим текст.
Свойства
Горизонтальный и вертикальный поворот
Элемент в серых оттенках. Инвертирует цвета (элемента). Пример pr15_4.htm Размытие элемента под указанным углом.
Фильтр - эффект размытой тени. Свойства
glow filter (свечение) xray filter (x-лучи)
Лекция 16 Динамические фильтры, в отличие от статических, предназначены для плавного перехода элемента из одного состояния видимости в другой за определенный промежуток времени.(Статическими тоже можно сделать плавный переход, но это требует больших усилий нежели воспользоваться динамическими) Существует только два динамических фильтра: blendTrans и revealTrans. Рассмотрим сначала фильтр blendTrans и начнем с его методов и свойств
Ниже представлен пример, где почти все методы и свойства этого фильтра применены.
<HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <style> div.head {position:relative; width:300; height:200; left:200 } div.auto {position:absolute; width:300; height:200; left:0 } </style> <SCRIPT type="text/javascript"> flag = true; //Переменная выполняющая функцию переключателя function replace(){ if (flag){ d.style.filter="blendTrans(duration=2)"; //Присваиваем фильтр и задаем длительность перехода 2с if (d.filters.blendTrans.status!= 2) { //Не выполнять пока работает фильтр d.filters.blendTrans.apply(); //Применяем фильтр d2.style.visibility="visible"; //Задаем вложеным элементам d1.style.visibility="hidden"; //нужную прозрачность d.filters.blendTrans.play(); //Запускаем фильтр на выполнение flag = false; //Изменяем переменную чтобы в следующий раз } //выполнилась другая часть условного оператора } else { d.style.filter="blendTrans(duration=2)"; if (d.filters.blendTrans.status!= 2) { d.filters.blendTrans.apply(); d2.style.visibility="hidden"; d1.style.visibility="visible"; d.filters.blendTrans.play(); flag = true; } } } </SCRIPT> </HEAD> <BODY>
<div id="d" class="head">
<div id="d1" class="auto" style="visibility:visible"> <img src="nis3.jpg" > </div>
<div id="d2" class="auto" style="visibility:hidden"> <img src="nis4.jpg"> </div>
</div>
<input type="button" value="Click Me" onclick="replace()" />
</BODY> </HTML>
Фильтр revealTrans позволяет делать переходы между двумя уровнями прозрачности с помощью 23 встроенных типов переходов. Номер нужного типа перехода (0 - 22)присваивается свойству transition этого фильтра. Все остальные методы и свойства соответствуют фильтру blendTrans. Стоит заметить, что значение 23 позволяет выбирать тип перехода случайным образом. <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE></TITLE> <style> div.head1 {position:absolute; width:219; height:250; left:200 } div.auto1 {position:absolute; width:219; height:250; left:0 } </style> <SCRIPT type="text/javascript"> <!-- flag1 = true; function replace1(tr){ if (flag1){ m.style.filter="revealTrans(duration=2)"; if (m.filters.revealTrans.status!= 2) { m.filters.revealTrans.transition = tr; m.filters.revealTrans.apply(); m2.style.visibility="visible"; m1.style.visibility="hidden"; m.filters.revealTrans.play(); flag1 = false; } } else { m.style.filter="revealTrans(duration=2)"; if (m.filters.revealTrans.status!= 2) { m.filters.revealTrans.transition = tr; m.filters.revealTrans.apply(); m2.style.visibility="hidden";
m1.style.visibility="visible"; m.filters.revealTrans.play(); flag1 = true; } } } </SCRIPT> </HEAD> <BODY>
<div id="m" class="head1">
<div id="m1" class="auto1" style="visibility:visible"> <img src="./image/cat.jpg" > </div>
<div id="m2" class="auto1" style="visibility:hidden"> <img src="./image/dog.jpg"> </div>
</div>
<SCRIPT type="text/javascript"> for (i=0; i<23; i++) { document.write("<input class=st type='button' onClick=replace1(" + i + ") value=Эффект" + i + ">"); } </SCRIPT>
</BODY> </HTML>
Дата добавления: 2014-01-04; Просмотров: 831; Нарушение авторских прав?; Мы поможем в написании вашей работы! Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет |