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

时间：2021-05-26

　这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了，具体的看看代码注释就会明白。下面就是全部代码，复制到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><img src="http://web-tinker.com/images/TheMagicConch.jpg" width="100" id="img" /><table id="mask"><tr><td id="mask_td"></td></tr></table><script>//判断浏览器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.onclick=function(e){ //判断事件来源，如果是空白区域被点击了就关闭mask e=e||event; (e.target||e.srcElement)==mask.td&&mask.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所以我们需要使用absolute和动态设置top来兼容它。然后就是mask的大小计算问题，这个也存在一个浏览器差异，其实这个效果中的浏览器差异问题还是挺大的，不过都是一些小问题看到了就会明白没有长篇大论的必要。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章