JavaScript writing click to view large image page Semitransparent mask Layer effect example _javascript tips

This effect is used very frequently, people always ask me this question, so I want to write it as an article. The next time someone asks, just throw out the URL of this article. This effect is very simple so I do not do too much explanation, the specific look at the code comments will understand. The following is the entire code, which can be run when copied into HTML.

<!
 DOCTYPE html> <style> #mask {position:fixed;width:100%;
 top:0px;left:0px;
 _position:absolute;
 _top:expression (Documentelement.scrolltop);
 Background:rgba (0,0,0,0.5);
 background:transparent\9;
 Filter:progid:DXImageTransform.Microsoft.Gradient (startcolorstr= #80000000, endcolorstr= #80000000);
Display:none; } #mask_td {Text-align:center} </style>  &L
T;table id= "Mask" ><tr><td id= "MASK_TD" ></td></tr></table> <script>//Judge Browser
var isie=navigator.useragent.match (/msie (\d)/i);
Isie=isie?isie[1]:isie;
DECLARE variable var img,mask;
Gets the element Img=document.getelementbyid ("img");
Mask=document.getelementbyid ("Mask");
Mask.td=document.getelementbyid ("Mask_td");
 Calculates the size of the Mask mask.setsize=function () {//Gets the visible area width of the document and sets it to the mask var de=document.documentelement;
mask.style.width=de.clientwidth+ "px" mask.style.height=de.clientheight+ "px";
}; Add Show Method Mask.show=function () {//Hide the page scroll bar document[isie<9? "
 DocumentElement ":" "Body"].style.overflow= "hidden";
 Calculate the size of the Mask mask.setsize (); Show mask.style.display=isie==6? "
Block ":" Table ";
}; Add Hide Method Mask.hide=function () {//Show page scroll bar document[isie<9? "
 DocumentElement ":" The Body "].style.overflow=";
 Empty the contents of the inside mask.td.innerhtml= "";
Hide mask.style.display= "None";
};
Add Append Method Mask.append=function (e) {//Add content in mask TD you Mask.td.appendChild (e);}; Click Mask Close Mask.onclick=function (e) {//Judge event source, close mask if blank area is clicked E=e| |
 Event (e.target| |
e.srcelement) ==mask.td&&mask.hide ();
};
Changes in the size of the form also change the size of the Mask window.onresize=function () {mask.setsize ();};
 Click on the Picture Event img.onclick=function () {///Create a Picture object var o=new image;
 Set the address of the picture o.src=img.src;
 Add content to the Mask mask.append (o);
Display mask mask.show ();
};
 </script>

This effect is no difficulty, the most difficult is perhaps the realization of the translucent. CSS3 's opacity and IE's alpha can all be translucent, but that's the translucent of the entire element. Using that method means that the child elements are also translucent, so we have to set the transparency to the background, not the entire element. CSS3 can be set directly by using the RGBA. There is no such method in IE, but you can replace it with a gradient filter because the gradient filter also supports transparency. Also, in IE9, CSS3 transparent and filter transparent, if two are used, the transparency of the page will be wrong. So we shielded one of the transparent effects in the IE9.
There is also a problem that is compatible with IE6, IE6 does not support fixed so we need to use absolute and dynamic set top to be compatible with it. Then is the size of the mask problem, this also has a browser differences, in fact, the effect of the browser differences in the problem is quite large, but are a few small problems to see will understand that there is no need for lengthy speeches.