Студопедия

КАТЕГОРИИ:


Архитектура-(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 = "название_фильтра(свойство=значение,...)"

Фильтр устанавливает прозрачность элемента.

Свойства

enabled false, фильтр не применяется к элементу, true - применяется. По умолчанию true.
finishOpasity Конечную прозрачность. 0 - полная прозрачность, 100 - полная не прозрачность.
finishX Указывается координата по оси X окончания прозрачности (в пикселах)
finishY Указывается координата по оси Y окончания прозрачности (в пикселах)
opacity Начальная прозрачность
startX Указывается координата по оси X начала прозрачности (в пикселах)
startY Указывается координата по оси Y начала прозрачности (в пикселах)
style Задает стиль прозрачности и может принимать значения:
  • 0 - Сплошная прозрачность
  • 1 - Линейная градиентная прозрачность
  • 2 - Радиальная градиентная прозрачность
  • 3 - Прямоугольная градиентная прозрачность
Пример pr15_2.htmПример pr15_2a.htm

Фильтр - эффект тени. Фильтр применяется только к элементам, содержащим текст.

Свойства

enabled false не применяется, true - применяется.
color Стиль - цвет тени.
offX Расстояние в пикселах от элемента до тени по оси X. Положительные - тень вправо, отрицательные - влево.
offY То же по оси Y. Положительные - тень вниз, отрицательные - вверх.
Пример pr15_3.htm

Горизонтальный и вертикальный поворот

enabled true или false

Элемент в серых оттенках.

Инвертирует цвета (элемента).

Пример pr15_4.htm

Размытие элемента под указанным углом.

enabled true или false
direction Угол размытия. Угол кратен 45 градусам.
strength Сила размытия. Диапазон 0 - 100;

Фильтр - эффект размытой тени.

Свойства

enabled true или false
color Цвет тени.
direction Угол размытия - кратен 45 градусам.

glow filter (свечение)

xray filter (x-лучи)

 

Лекция 16

Динамические фильтры, в отличие от статических, предназначены для плавного перехода элемента из одного состояния видимости в другой за определенный промежуток времени.(Статическими тоже можно сделать плавный переход, но это требует больших усилий нежели воспользоваться динамическими)

Существует только два динамических фильтра: blendTrans и revealTrans.

Рассмотрим сначала фильтр blendTrans и начнем с его методов и свойств

apply() Метод, который указывает, что данный фильтр будет применен к объекту (обязательная операция).
duration Свойство, которое устанавливает интервал времени в секундах за который будет производиться переход из одного уровня прозрачности в другой.
play() Метод, позволяющий запустить фильтр на выполнение.
stop() Метод, останавливающий фильтр если тот выполнялся.
status Свойство, показывающее состояние фильтра:
  • 0 - если фильтр остановлен
  • 1 - если фильтр применен
  • 2 - если фильтр выполняется
enabled Свойство, принимающее два значения: true или false. Если присвоить false, то фильтр не применяется к элементу, true - применяется. По умолчанию свойство имеет значение true.

Ниже представлен пример, где почти все методы и свойства этого фильтра применены.

<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; Просмотров: 807; Нарушение авторских прав?; Мы поможем в написании вашей работы!


Нам важно ваше мнение! Был ли полезен опубликованный материал? Да | Нет



studopedia.su - Студопедия (2013 - 2024) год. Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав! Последнее добавление




Генерация страницы за: 0.038 сек.