Эффект: Когда пользователи, использующие системы Windows, выключаются, интерфейс, который появляется, позволяет пользователям выбирать выключение, выходить из строя или отменять действия, в то время как программы на рабочем столе не могут быть использованы, а экран вылетел. Эффект отключения Windows показан на рисунке 22.1.
Преимущества использования этого эффекта на веб -страницах: каковы преимущества использования этого эффекта отключения на веб -страницах? Во -первых, после нажатия на ссылку действия, которые не доступны пользователю в настоящее время, скрыты в фоновом режиме, а доступные действия размещаются в верхней части экрана и выделены, что может избежать неправильного вычета пользователя. Во -вторых, выделение информации также может напомнить пользователям о вещах, на которые следует обратить внимание.
Принцип: принцип достижения этого эффекта на веб -странице очень прост. Создайте два слоя, один как слой затенения, охватывающий всю страницу и отображая серого; Другой слой служит выделенной частью, над слоем затенения, который можно установить, установив свойство Z-Index слоя. Когда эффект отключения отменен, просто удалите эти два элемента слоя на странице.
Код:
<html>
<голова>
<title> Ajax whutdown Effect </title>
<styletype = text/css>
#lightbox {/*Этот слой является слоем выделения*/
Граница правая:#ffff1pxsolid;
Граница:#ffff1pxsolid;
Дисплей: блок;
Z-index: 9999;/*Установите этот слой в верхней части веб-страницы, установите его достаточно большой*/
Фон:#fdfce9;/*Установить цвет фона*/
Слева: 50%;
Маржа: -220px0px0px-250px;
РЕДУРНАЯ ЛЕРФ:#FFFF1PXSOLID;
Ширина: 500px;
Пограничный пакет:#ffff1pxsolid;
Позиция: абсолютно;
Верх: 50%;
Высота: 400px;
Текст-альбом: слева
}
#Overlay {/*Этот слой представляет собой слой крышки*/
Дисплей: блок;
Z-index: 9998;/*Установите нижнюю часть слоя выделения*/
Фильтр: альфа (непрозрачность = 20);/*Установить для прозрачного*/
Слева: 0px;
Ширина: 100%;
Позиция: абсолютно;
Верх: 0px;
Высота: 100%;
Фоновый цвет:#000;
Moz-opbity: 0,8;
непрозрачность: .80
}
</style>
</head>
<тело>
<ahref = http: //www.baidu.comtarget=_blank> baidu </a>
<!-Этот слой-слой крышки->
<divid = overlay> </div>
<!-Этот слой-основной слой->
<divid = lightbox> <ahref =#onclick = javascript: f ()> close </a> & nbsp; <ahref =#onclick = javascript: f1 ()> open </a> </div>
</body>
</html>
<Скрипт>
functionf ()
{
document.getElementbyId (наложение) .Style.display = none;
}
functionf1 ()
{
document.getElementbyId (наложение) .Style.display = block;
}
</script>
ПРИМЕЧАНИЕ. Если в браузере IE есть тег <select>, тег не может быть перезаписан перезаписанным слоем, но он может быть перезаписан в других браузерах. На рисунке 22.3 показан эффект тега <elect> в браузере IE, а на рисунке 22.4 показан эффект тега <elect> в Mozzilafirefox.
Рисунок 22.3 <Select> Tag в браузере IE
Рисунок 22.4 Tag в браузере Mozzilafirefox
Поэтому при использовании браузера IE вы должны сначала скрыть элемент <select> на веб -странице. Например, следующий код может быть использован для скрытия всех элементов <elect> страницы.
selects = document.getElementsbytagname ('select');
для (i = 0; i <selects.length; i ++) {
выбирает [i] .style.visibility = видимость;
}