Este efecto se usa con mucha frecuencia, y la gente a menudo me hace esta pregunta, por lo que tengo que escribirlo en un artículo. La próxima vez que alguien pregunta, simplemente descarte la URL de este artículo. Este efecto es muy simple, por lo que no lo explicaré demasiado. Si observa los comentarios del código en detalle, lo comprenderá. El siguiente es todo el código, que se puede ejecutar copiándolo en HTML.
<! Doctype html> <style> #mask {posición: fijo; ancho: 100%; arriba: 0px; izquierda: 0px; _Position: Absoluto; _TOP: Expression (DocumentElement.scrollTop); Antecedentes: RGBA (0,0,0,0.5); Antecedentes: transparente/9; Filtro: progid: dximagetransform.microsoft.gradient (startColorStr =#80000000, endcolortr =#80000000); visualización: ninguno;}#Mask_td {text-align: Center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "máscara"> <tr> <tr> <td Id = "_td "> </td> </tr> </table> isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1]: isie; // declarar la variable var img, máscara; // obtener el elemento img = document.getElementById ("img"); document.getElementById ("Mask"); Mask.td = document.getElementBy ("" Maskd "; de Mask Mask.setsize = function () {// Obtenga el ancho de área visible del documento y configúrelo en la máscara var de = document.documentelement; Mask.style.width = de.clientWidth+"Px" Mask.style.height = de.clientheight+"Px" Mask.style.height = de.clientheight+"PX";}; // Agregar el método de exposición Mask.show = function () {// ocultar el documento de barra de desplazamiento [isie <9? "Documelement": ":" Cuerpo " ] .style.overflow = "oculto"; // Calcule el tamaño de la máscara de máscara.setsize (); // show mask.style.display = isie == 6? "Bloque": "tabla";}; // Agregar método Hide Mask.hide = function () {// Mostrar documento de ScrollBar [ISIE <9? "DocumentEelement": "Body"] .style.overflow = ""; // Borrar el contenido dentro de Mask.td.innerhtml = ""; // ocultar mascar.style.display = "ninguno";}; // Agregar método de append mascar.append = function (e) {// Agregar contenido en Mask TD, usted Mask.td.AppendChild (e);}; // Haga clic en Mask para cerrar Mask.OnClick = Function (E) {// Juez de la fuente del evento, si se hace clic en el área en blanco, Close Mask E = E || Evento; (E.Target || E.SrCelement) == Mask.td && Mask.hide ();}; // Agregue el tamaño de la máscara cuando el tamaño de formulario cambia Window.onresize = function () {Mask.setsize ();}; // Haga clic en el evento de imagen img.onClick = function () {) {// Crear una imagen var o = nueva imagen; // Establecer la dirección de imagen o.src = img.src; // Agregar contenido Mask.append (O); // Show Mask.show ();}; </script>No hay dificultad en este efecto, y la más difícil es quizás la implementación translúcida. Tanto la opacidad de CSS3 como el alfa de IE pueden lograr la translucencia, pero esa es la translucencia de todo el elemento. Usar ese método significa que los elementos infantiles también son translúcidos, por lo que tenemos que establecer la transparencia en el fondo, no en todo el elemento. En CSS3, puede usar directamente RGBA para configurarlo. No existe tal método en IE, pero puede usar un filtro de gradiente, porque los filtros de gradiente también admiten la transparencia. Además, en IE9, es compatible con la transparencia de CSS3 y la transparencia del filtro. Si se usan ambos, la transparencia de la página será incorrecta. Entonces bloqueamos uno de los efectos transparentes en IE9.
Otro problema es que es compatible con IE6. IE6 no admite fijo, por lo que debemos usar la parte superior absoluta y dinámica para ser compatible con él. Luego está el problema del cálculo del tamaño de la máscara. También hay una diferencia de navegador. De hecho, la diferencia del navegador en este efecto es bastante grande, pero cuando ves algunos pequeños problemas, entenderás que no hay necesidad de hablar de ello en gran medida.