html点击图片大图 有罩层,JavaScript编写点击查看大图的页面半透明遮罩层效果实例...

这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了，具体的看看代码注释就会明白。下面就是全部代码，复制到HTML中就可以运行的。

#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;}

src="http://web-tinker.com/images/TheMagicConch.jpg"

width="100" id="img"

/>

//判断浏览器

var isIE=navigator.userAgent.match(/MSIE (\d)/i);

isIE=isIE?isIE[1]:isIE;

//声明变量

var img,mask;

//获取元素

img=document.getElementById("img");

mask=document.getElementById("mask");

mask.td=document.getElementById("mask_td");

//计算mask的大小

mask.setSize=function(){

//获取文档可见区域宽度并设置到mask上

var de=document.documentElement;

mask.style.width=de.clientWidth+"px"

mask.style.height=de.clientHeight+"px";

};

//添加show方法

mask.show=function(){

//隐藏页面的滚动条

document[

isIE<9?"documentElement":"body"

].style.overflow="hidden";

//计算mask的大小

mask.setSize();

//显示

mask.style.display=isIE==6?"block":"table";

};

//添加hide方法

mask.hide=function(){

//显示页面滚动条

document[

isIE<9?"documentElement":"body"

].style.overflow="";

//清空里面的内容

mask.td.innerHTML="";

//隐藏

mask.style.display="none";

};

//添加append方法

mask.append=function(e){

//在mask的TD里面添加内容哦你

mask.td.appendChild(e);

};

//点击mask关闭

mask.οnclick=function(e){

//判断事件来源，如果是空白区域被点击了就关闭mask

e=e||event;

(e.target||e.srcElement)==mask.td&&mask.hide();

};

//窗体大小改变时也改变mask的大小

window.οnresize=function(){

mask.setSize();

};

//点击图片的事件

img.οnclick=function(){

//创建一个图片对象

var o=new Image;

//设置图片的地址

o.src=img.src;

//在mask内添加内容

mask.append(o);

//显示mask

mask.show();

};

这个效果是没有什么难点了，最困难的也许就是半透明的实现了吧。CSS3的opacity和IE的alpha都可以实现半透明，但是那是整个元素的半透明。使用那种方法就意味着子元素也被半透明了，所以我们必须把透明设置到背景上，而不是整个元素上。CSS3中可以直接使用rgba来设置。IE中没有这样的方法，但是可以使用渐变滤镜来代替它，因为渐变滤镜也是支持透明的。还有，在IE9中，同时兼容CSS3的透明和滤镜的透明，如果两个都使用，页面的透明度就会不对。所以我们在IE9中屏蔽了其中一种透明效果。

还有一点问题就是兼容IE6的，IE6不支持fixed所以我们需要使用absolute和动态设置top来兼容它。然后就是mask的大小计算问题，这个也存在一个浏览器差异，其实这个效果中的浏览器差异问题还是挺大的，不过都是一些小问题看到了就会明白没有长篇大论的必要。