最近很火的图片遮罩层展示页面的实现【前端开发技能必备系列】

以新建的遮罩层显示大图片越来越受到主流网站的认可和重视，现在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; 
}