這個效果用的很頻繁,常常都會有人問我這個問題,所以要把它寫成文章。下次再有人問就直接把這篇文章的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的大小計算問題,這個也存在一個瀏覽器差異,其實這個效果中的瀏覽器差異問題還是挺大的,不過都是一些小問題看到了就會明白沒有長篇大論的必要。