Cet effet est utilisé très fréquemment et les gens me posent souvent cette question, je dois donc l'écrire dans un article. La prochaine fois que quelqu'un le demande, jetez simplement l'URL de cet article. Cet effet est très simple, donc je ne l'expliquerai pas trop. Si vous regardez les commentaires du code en détail, vous le comprendrez. Ce qui suit est tout le code, qui peut être exécuté en le copiant dans HTML.
<! Doctype html> <style> #mask {position: fixe; largeur: 100%; En haut: 0px; gauche: 0px; _Position: Absolute; _top: expression (documentElement.scrollTop); Contexte: RGBA (0,0,0,0,5); Contexte: transparent / 9; Filtre: PROGID: DximAreTransform.Microsoft.gradient (startColorstr = # 80000000, EndColorstr = # 80000000); Affichage: Aucun;} # mask_td {text-align: Center;} </ style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img" /> <table id = "mask"> <tr> <td id = "Mask_td"> </td> var isie = navigator.useragent.match (/ msie (/ d) / i); Isie = Isie? Isie [1]: ISIE; // Déclare la variable var img, masque; // Obtenez l'élément img = document.getElementById ("img"); mask = document.getElementById ("mask"); mask.td = document.getElementByid ("mask_td"); // calculer la taille de masque masque.setSize = function () {// Obtenez la largeur de la zone de visible du document et l'installez-le au masque var de = document.documentElement; mask.style.width = de.clientwidth + "px" mask.style.height = de.clientheight + "px" mask.style.height = de.clientheight + "px";}; // ajouter la méthode de l'émission masque.show = function () "body" body " ] .style.overflow = "Hidden"; // calculer la taille du masque masque.setSize (); // montre mask.style.display = Isie == 6? "Block": "Table";}; // Ajouter une méthode masquée masque.hide = function () {// Afficher la page de scrollbar document [ISIE <9? "DocumentElement": "body"] .style.overflow = ""; // efface le contenu dans mask.td.innerhtml = ""; // masquer mask.style.display = "Aucun";}; // Ajouter une méthode de l'annexe mask.append = function (e) {// ajouter du contenu dans Mask TD, vous masquez.td.appendChild (e);}; // cliquez sur Mask pour clôturer Mask.onclick = fonction (e) {// juge la source de l'événement, si la zone de blanc est cliquée, Close Mask E = E | (e.target || e.srcelement) == mask.td && mask.hide ();}; // ajouter la taille du masque lorsque la taille du formulaire modifie la fenêtre.onResize = function () {mask.setsize ();}; // cliquez sur l'événement de l'image img.onclick = function () {) {// créer un objet image var o o = new image; // Définissez l'adresse d'image o.src = img.src; // Ajouter un masque de contenu.APPEND (O); // montre Mask mask.show ();}; </script>Il n'y a aucune difficulté dans cet effet, et le plus difficile est peut-être la mise en œuvre translucide. L'opacité de CSS3 et Alpha de IE peut atteindre la translucidité, mais c'est la translucidité de l'élément entier. L'utilisation de cette méthode signifie que les éléments enfants sont également translucides, nous devons donc définir la transparence sur l'arrière-plan, pas l'élément entier. Dans CSS3, vous pouvez utiliser directement RGBA pour le définir. Il n'y a pas une telle méthode dans IE, mais vous pouvez utiliser un filtre de gradient à la place, car les filtres à gradient prennent également en charge la transparence. De plus, dans IE9, il est compatible à la fois avec la transparence de CSS3 et la transparence du filtre. Si les deux sont utilisés, la transparence de la page sera incorrecte. Nous avons donc bloqué l'un des effets transparents dans IE9.
Un autre problème est qu'il est compatible avec IE6. IE6 ne prend pas en charge fixe, nous devons donc utiliser le top absolu et dynamiquement compatible avec lui. Ensuite, il y a le problème du calcul de la taille du masque. Il y a aussi une différence de navigateur. En fait, la différence de navigateur dans cet effet est assez importante, mais lorsque vous voyez quelques petits problèmes, vous comprendrez qu'il n'est pas nécessaire d'en parler dans un long chemin.