Esse efeito é usado com muita frequência e as pessoas costumam me fazer essa pergunta, então eu tenho que escrever em um artigo. Da próxima vez que alguém perguntar, basta jogar fora o URL deste artigo. Esse efeito é muito simples, então não vou explicar muito. Se você olhar para os comentários do código em detalhes, você o entenderá. O seguinte é todo o código, que pode ser executado copiando -o em HTML.
<! DOCTYPE html> <estilo> #mask {position: corrigido; largura: 100%; topo: 0px; esquerda: 0px; _Position: absoluto; _top: expressão (documentElement.scrolltop); Antecedentes: RGBA (0,0,0,0,5); Antecedentes: transparente/9; Filtro: Progid: dIMAGETRANSForm.microsoft.gradient (startColorstr =#80000000, endColorstr =#80000000); Exibir: nenhum;}#Mask_td {text-align: Center;} </style> <img src = "http://web-tinker.com/images/themagicConch.jpg" id = "img"/> <table id = ""> <tr> <td id = "Mask_td" isie = Navigator.UserAgent.match (/msie (/d)/i); isie = Isie? Isie [1]: ISIE; // Declare a variável var iMg, mask; // obtenha o elemento img = document.getElementById ("img"); máscara/document. de Mask Mask.SetSize = function () {// Obtenha a largura da área visível do documento e defina -o como máscara var de = document.documentElement; Mask.style.width = de.clientWidth+"px" Mask.style.Height = de.clientHeight+"px" Mask.style.Height = de.clientHeight+"px";}; // Adicione o método Method Mask.show = function () {// Ocultar o documento do Scrollar [Isie <Isie <? ] .style.overflow = "Hidden"; // calcule o tamanho da máscara de máscara.SetSize (); // Mostrar máscara.style.display = isie == 6? "Block": "tabela";}; // Adicione o hide método máscara.hide = function () {// Mostrar documento de scrollbar da página [ISIE <9? "DocumentElement": "Body"] .style.overflow = ""; // limpe o conteúdo dentro de máscara.td.innerhtml = ""; // ocultar máscara.style.display = "nenhum";}; // Adicione o método de append máscara.append = function (e) {// Adicione conteúdo no máscara td, você mask.td.appendchild (e);}; // clique em máscara para fechar máscara não clicar em máscara. (e.Target || E.SrCelement) == Mask.td && Mask.hide ();}; // Adicione o tamanho da máscara quando o tamanho do formulário muda de window.onResize = function () {mask.setsize ();}; // Clique no evento da imagem IMG.Click = function () {) {/ Crie uma imagem // defina o endereço da imagem o.src = img.src; // Adicione Content Mask.append (O); // Mostrar máscara de máscara.show ();}; </script>Não há dificuldade nesse efeito, e a mais difícil é talvez a implementação translúcida. Tanto a opacidade do CSS3 quanto o alfa do IE podem alcançar translucidez, mas essa é a translucidez de todo o elemento. Usar esse método significa que os elementos filhos também são translúcidos, portanto, precisamos definir a transparência para o plano de fundo, não o elemento inteiro. No CSS3, você pode usar diretamente o RGBA para defini -lo. Não existe esse método no IE, mas você pode usar um filtro de gradiente, porque os filtros de gradiente também suportam a transparência. Além disso, no IE9, é compatível com a transparência do CSS3 e a transparência do filtro. Se ambos forem usados, a transparência da página estará incorreta. Então, bloqueamos um dos efeitos transparentes no IE9.
Outro problema é que é compatível com o IE6. O IE6 não suporta fixo, portanto, precisamos usar o Top absoluto e dinamicamente para ser compatível com ele. Depois, há o problema do cálculo do tamanho da máscara. Há também uma diferença de navegador. De fato, a diferença do navegador nesse efeito é bastante grande, mas quando você vê alguns pequenos problemas, entenderá que não há necessidade de falar sobre isso em um longo caminho.