Этот эффект используется очень часто, и люди часто задают мне этот вопрос, поэтому я должен написать его в статью. В следующий раз, когда кто -то спросит, просто выбросьте URL этой статьи. Этот эффект очень прост, поэтому я не буду слишком много объяснять. Если вы подробно посмотрите на комментарии кода, вы это поймете. Ниже приводится весь код, который может быть запустить, копируя его в HTML.
<! Doctype html> <style> #mask {позиция: фиксированная; ширина: 100%; Верх: 0px; слева: 0px; _position: абсолютно; _top: Expression (documentElement.scrolltop); Предпосылки: RGBA (0,0,0,0,5); Фон: прозрачный/9; Фильтр: Progid: dximagetransform.microsoft.gradient (startColorStr =#80000000, EndColorStr =#80000000); Дисплей: None;}#mask_td {text-align: center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask"> <Td> <Td ID = "mask_td"/> </td> </tript> </tript> </tript> </tript> </tript> </tript> <pript> <dript> <tr> <tr> <tr> <td> <Td ID = " Браузер var isie = navigator.useragent.match (/msie (/d)/i); isie = isie? Isie [1]: isie; // объявить переменную var img, mask; // получить элемент img = document.getElementbyId ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementById ("mask_td"); // Рассчитайте размер маски. mask.style.width = de.clientwidth+"px" mask.style.height = de.clientHeight+"px" mask.style.height = de.clientHeight+"px";}; // Добавить метод показания. ] .style.overflow = "hidden"; // Рассчитайте размер маски маски. SetSize (); // show mask.style.display = isie == 6? "Block": "таблица";}; // Добавить Mide Method Mask.hide = function () {// Показать документ Scrollbar Page [isie <9? // очистить содержание внутри Mask.td.innerhtml = ""; // скрыть mask.style.display = "none";}; // Добавить метод приложения mask.append = function (e) {// Добавить контент в маске td, you mask.td.appendchild (e);}; // щелкнуть маску, чтобы закрыть Mask.onclick = function (e) {// Оценить источник события, если в области заблокированная область, нажатая Mask mask e | (e.target || e.srcelement) == mask.td && mask.hide ();}; // Добавить размер маски, когда размер формы изменяет window.onresize = function () {mask.setize ();}; // Нажмите на событие изображения img.onclick = function () {) {// Создание объекта Image var var ar var var; // Установить адрес изображения o.src = img.src; // Добавить контент mask.append (o); // Показать mask mask.show ();}; </script>В этом эффекте нет никаких трудностей, и наиболее сложным является, возможно, полупрозрачная реализация. Как непрозрачность CSS3, так и альфа IE могут достичь полупрозрачности, но это полупрозрачность всего элемента. Использование этого метода означает, что дочерние элементы также являются полупрозрачными, поэтому мы должны установить прозрачность на фон, а не весь элемент. В CSS3 вы можете напрямую использовать RGBA, чтобы установить его. В IE нет такого метода, но вместо этого вы можете использовать градиентный фильтр, потому что градиентные фильтры также поддерживают прозрачность. Кроме того, в IE9 он совместим как с прозрачностью CSS3, так и с прозрачностью фильтра. Если оба используются, прозрачность страницы будет неверной. Таким образом, мы заблокировали одно из прозрачных эффектов в IE9.
Другая проблема заключается в том, что он совместим с IE6. IE6 не поддерживает фиксированную, поэтому нам нужно использовать абсолютный и динамически устанавливать топ, чтобы быть совместимым с ним. Тогда есть проблема расчета размера маски. Есть также разница в браузерах. На самом деле, разница в браузерах в этом эффекте довольно большая, но когда вы увидите некоторые небольшие проблемы, вы поймете, что нет необходимости говорить об этом в долг.