JavaScript编写点击查看大图的页面半透亮遮罩层效果实例_

1、JavaScript编写点击查看大图的页面半透亮遮罩层效果实例_ 这篇文章主要介绍了JavaScript制作点击查看大图的页面遮罩层效果实例,透亮部分这里用法的是CSS3的rgba,兼容性还是过得去的,需要的伴侣可以参考下 这个效果用的很频繁，常常都会有人问我这个问题，所以要把它写成文章。下次再有人问就挺直把这篇文章的URL丢出去就好了。这个效果很简洁所以我就不做太多说明白，具体的看看代码说明就会明白。下面就是全部代码，复制到HTML中就可以运行的。 !DOCTYPE html style #mask position:fixed;width:100%; top:0px;left:0px; _

2、position:absolute; _top:expression(documentElement.scrollTop); background:rgba(0,0,0,0.5); background:transparent9; filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000 ); display:none; #mask_td text-align:center; /style img src=http:/web- width=100 id=img

3、 / table id=masktrtd id=mask_td/td/tr/table script /推断扫瞄器 var isIE=navigator.userAgent.match(/MSIE (d)/i); isIE=isIE?isIE1:isIE; /声明变量 var img,mask; /猎取元素 img=document.getElementById(img); mask=document.getElementById(mask); mask.td=document.getElementById(mask_td); /计算mask的大小 mask.setSize=function(

4、) /猎取文档可见区域宽度并设置到mask上 var de=document.documentElement; mask.style.width=de.clientWidth+px mask.style.height=de.clientHeight+px; ; /添加show方法 mask.show=function() /隐蔽页面的滚动条 document isIE9?documentElement:body .style.overflow=hidden; /计算mask的大小 mask.setSize(); /显示 mask.style.display=isIE=6?block:table

5、; ; /添加hide方法 mask.hide=function() /显示页面滚动条 document isIE9?documentElement:body .style.overflow=; /清空里面的内容 mask.td.innerHTML=; /隐蔽 mask.style.display=none; ; /添加append方法 mask.append=function(e) /在mask的TD里面添加内容哦你 mask.td.appendChild(e); ; /点击mask关闭 mask.onclick=function(e) /推断大事来源，假如是空白区域被点击了就关闭mask

6、e=e|event; (e.target|e.srcElement)=mask.tdmask.hide(); ; /窗体大小转变时也转变mask的大小 window.onresize=function() mask.setSize(); ; /点击图片的大事 img.onclick=function() /创建一个图片对象 var o=new Image; /设置图片的地址 o.src=img.src; /在mask内添加内容 mask.append(o); /显示mask mask.show(); ; /script 这个效果是没有什么难点了，最困难的或许就是半透亮的实现了吧。CSS3的opacity和IE的alpha都可以实现半透亮，但是那是整个元素的半透亮。用法那种方法就意味着子元素也被半透亮了，所以我们必需把透亮设置到背景上，而不是整个元素上。CSS3中可以挺直用法rgba来设置。IE中没有这样的方法，但是可以用法渐变滤镜来代替它，由于渐变滤镜也是支持透亮的。还有，在IE9中，同时兼容CSS3的透亮和滤镜的透亮，假如两个都用法，页面的透亮度就会不对。所以我们在IE9中屏蔽了其中一种透亮效果。 还有一点问题就是兼容IE6的，IE6不支持fixed