最近很火的图片遮罩层展示页面的实现【前端开发技能必备系列】
以新建的遮罩层显示大图片越来越受到主流网站的认可和重视，现在QQ空间和人人网两大社区都采用了此种方法来展示照片。这种展示照片的方式确实很实用：不用重新打开窗口；点击空白区域自动关闭；背景半透明，突出主题。
我也忍不住学习和模仿一下这种实现，以备不时之需。
由于遮罩层都用js生成，所以html代码就非常简单了：
<body class="body"> <p> <a href="http://www.threesnow.com/code/088/big.jpg" rel="Imgbox"><img src="http://www.threesnow.com/code/088/small.jpg" alt="点我啊，呵呵" title="点击我显示大图片"></a> </p> </body>
注意：body标签中的class属性很关键，不要漏掉。。。
然后就是写js了，一步一步来吧，主要是弄清怎么修改其中的属性，日后为我所用。。。
function topDiv(el){ var elem=document.createElement("div"); elem.className="top-div"; //=========生成图片标签 var img=document.createElement("img"); img.src=el.href; elem.appendChild(img); //=========生成遮罩层的关闭按钮 var closeDiv=document.createElement("div"); closeDiv.innerHTML="关闭"; closeDiv.onclick=function(){ document.body.removeChild(elem); document.body.removeChild(alpha); } closeDiv.style.position="absolute"; closeDiv.style.right="2px"; closeDiv.style.top="2px"; closeDiv.style.fontSize="12px"; closeDiv.style.color="red"; closeDiv.style.border="1px solid #333"; closeDiv.style.backgroundColor="#eee"; closeDiv.style.cursor="hand"; elem.appendChild(closeDiv); //=========将生成的遮罩层附到 body 标签内 document.body.appendChild(elem); var alpha = alphaDiv(elem); } function alphaDiv(el){ var elem=document.createElement("div"); elem.className="alphaDiv"; elem.onclick=function(e){ document.body.removeChild(elem); document.body.removeChild(el); } document.body.appendChild(elem); return elem; } onload=function(){ var links=document.getElementsByTagName("a"); for(var i=0,len=links.length;i<len;i++){ if(links[i].rel=="Imgbox"){ links[i].onclick=function(){ topDiv(this); return false; } } } }
再加上CSS代码：
.alphaDiv{ z-index:100; width:100%; height:100%; opacity:0.5; background:#666666; top:0; left:0; position:absolute; filter:alpha(opacity=50); } .top-div{ z-index:101; border:1px solid #333; padding:2px; background:#eee; position:absolute; } a{ outline:none; }
大功告成，可以在自己的图片上应用这种遮罩效果了（我已经打算在公司网站的图片上用这种效果了）。
差点忘了——看看效果
