Example of semi-transparent mask layer effect on the page written in JavaScript. Click to view the larger image

Example of semi-transparent mask layer effect on the page written in JavaScript. Click to view the larger image_javascript skills

WBOY

Release： 2016-05-16 09:00:26

Original

1491 people have browsed it

this effect is used very frequently, and people often ask me this question, so i want to write it into an article. next time someone asks, just throw out the url of this article. this effect is very simple, so i won’t explain it too much. you will understand it if you look at the code comments. below is the entire code, you can copy it into html and run it.

<!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>

Copy after login

there is no difficulty in this effect. perhaps the most difficult thing is to achieve translucency. both css3's opacity and ie's alpha can achieve translucency, but that is the translucency of the entire element. using that method means that the child element is also made translucent, so we have to set transparency to the background, not the entire element. in css3, rgba can be used directly to set it. there is no such method in ie, but you can use a gradient filter to replace it, because the gradient filter also supports transparency. also, in ie9, it is compatible with both css3 transparency and filter transparency. if both are used, the transparency of the page will be incorrect. so we blocked one of the transparency effects in ie9.
another problem is that it is compatible with ie6. ie6 does not support fixed, so we need to use absolute and dynamically set top to be compatible with it. then there is the problem of mask size calculation. there is also a browser difference in this. in fact, the browser difference in this effect is quite big, but they are all small problems and you will understand that there is no need for a long explanation.