Автор статьи: Головин Андрей
Мы уже рассматривали возможности фильтров визуальных элементов в IE версии 4 и выше. Теперь посмотрим как это можно применить на практике.
Те из вас, кто уже поставил Windows 2000, заметили, что теперь для появляющихся (pop-up) меню можно выбрать эффект постепенного появления этого меню. Посмотрим, что можно сделать, чтобы получить подобный эффект на своей странице.
Для этого можно использовать фильтр прозрачности alpha. Для того, чтобы поменять параметры фильтра необходимо обратиться к совойству filters элемента. Например, так:
alert(element.filters.alpha);
Эффекта постепенного появления можно достигнуть путем последовательного изменения параметра opacity этого фильтра. Делаем это с помощью следующей процедуры:
0:function showMenu(el) {
1: if (el.filters.alpha.opacity >< 100) {
2: el.filters.alpha.opacity += step;
3: menuShower = window.setTimeout("showMenu(" + el.id + ")",1);
4: } else {
5: el.filters.alpha.opacity = 100;
6: window.clearTimeout(menuShower);
7: }
8:}
el - элемент, прозрачность которого мы меняем. В строчке 2 параметр step указывает шаг изменения прозрачности. Каждый вызов функции showMenu() вызывает уменьшение (напомню, что параметр opacity отвечает за "непрозрачность", следовательно его увеличение приводит к уменьшению прозрачности) прозрачности. В строчке 3 мы вызываем эту функцию через некоторый промежуток времени. Напомню, что прозрачность изменяется от 0 (полностью прозрачно) до 100 (полностью непрозрачно). В строчке 6 мы останавливаем процесс изменения прозрачности.
Подобным образом мы реализуем эффект постепенного исчезновения элемента:
0:function hideMenu(el) {
1: if (el.filters.alpha.opacity >= step) {
2: el.filters.alpha.opacity -= step;
3: menuShower = window.setTimeout(«hideMenu(» + el.id + «)»,1);
4: } else {
5: el.filters.alpha.opacity = 0;
6: window.clearTimeout(menuShower);
7: el.style.visibility = «hidden»;
8: }
9:}
Не вредно будет «спрятать» элемент после того, как он станет прозрачным.
Для данного элемента я применил следующее описание стиля:
.menu {
position: absolute;
background-color: buttonface;
border: 2px outset white;
padding: 0px;
font-size: 8pt;
filter: alpha(Opacity=0, Style=0);
visibility: hidden;
}
Параметры фильтра alpha указывают на то, что элемент полностью прозрачен (Opacity=0), а стиль прозрачности — равномерная (Style=0). Кроме того, элемент изначально не виден (visibility: hidden;).
