В этой статье описывается метод выявления полноэкранного серых черно-черно-черно-прозрачного эффекта маски JS+CSS. Поделитесь этим для вашей ссылки. Конкретный анализ заключается в следующем:
Есть такие эффекты на многие сайты. После выполнения определенной операции появится серо-черная полупрозрачная маска. Указанный контент может работать на нем, например, ящик для входа и другое содержимое. Давайте представим, как добиться этого эффекта. Пример кода заключается в следующем:
Скопируйте код следующим образом: <! Doctype html>
<html>
<голова>
<meta charset = "utf-8">
<meta name = "Author" content = "// www.vevb.com/"/>
<название> Как разобраться в полноэкранном серо-черном прозрачном эффекте маски-wulin.com </title>
<стиль типа = "text/css">
*
{
поля: 0px;
Заполнение: 0px;
}
.zhezhao
{
Ширина: 100%;
высота: 100%;
фоновый цвет:#000;
Фильтр: альфа (непрозрачность = 50);
-Моз-мобилизация: 0,5;
непрозрачность: 0,5;
позиция: абсолютно;
слева: 0px;
Верх: 0px;
дисплей: нет;
Z-Index: 1000;
}
.авторизоваться
{
Ширина: 280px;
Высота: 180px;
позиция: абсолютно;
Верх: 200px;
Слева: 50%;
фоновый цвет:#000;
Мяглевая маржа: -140PX;
дисплей: нет;
Z-Index: 1500;
}
.содержание
{
маржинальная версия: 50px;
Цвет: красный;
высота линии: 200px;
Высота: 200px;
Текст-альбом: Центр;
}
</style>
<script type = "text/javascript">
window.onload = function ()
{
var zhezhao = document.getElementByid ("Zhezhao");
var login = document.getElementById ("login");
var bt = document.getElementbyId ("bt");
var btclose = document.getElementbyId ("btclose");
bt.onclick = function ()
{
zhezhao.style.display = "block";
login.style.display = "block";
}
btclose.onclick = function ()
{
zhezhao.style.display = "none";
login.style.display = "none";
}
}
</script>
</head>
<тело>
<div id = "Zhezhao"> </div>
<div id = "login"> <button id = "btclose"> нажмите, чтобы закрыть </button> </div>
<div> wulin.com приветствует вас, <button id = "bt"> нажмите, чтобы вспять маска </button> </div>
</body>
</html>
Вышеуказанное реализует основную функцию маски. Нажав, чтобы вспять маску, появится объект. Нажав, чтобы закрыть, эффект маски исчезнет. Вот как достичь эффекта:
Принцип реализации:
Создайте полноэкранный DIV, используя абсолютное позиционирование, чтобы его можно было отделить от потока документов, не затрагивая другие элементы и установите его на полупрозрачное состояние. Конечно, эта прозрачность может быть скорректирована по желанию и создать элемент входа в систему, который также использует абсолютное позиционирование и делает его значение Z-индексного атрибута больше, чем DIV на экране, и в настоящее время оно не будет покрыто полноэкрашенным DIV. В состоянии по умолчанию значение атрибута отображения этих двух DOV не является. Нажав соответствующую кнопку, они могут изменить значение своего атрибута отображения.
Предложение: рукописный код как можно больше может эффективно повысить эффективность обучения и глубину.
Я надеюсь, что эта статья будет полезна для каждого веб -программирования.