這篇文章主要介紹了JavaScript制作點(diǎn)擊查看大圖的頁(yè)面遮罩層效果實(shí)例,透明部分這里使用的是CSS3的rgba,兼容性還是過(guò)得去的,需要的朋友可以參考下
這個(gè)效果用的很頻繁，經(jīng)常都會(huì)有人問(wèn)我這個(gè)問(wèn)題，所以要把它寫成文章。下次再有人問(wèn)就直接把這篇文章的URL丟出去就好了。這個(gè)效果很簡(jiǎn)單所以我就不做太多說(shuō)明了，具體的看看代碼注釋就會(huì)明白。下面就是全部代碼，復(fù)制到HTML中就可以運(yùn)行的。
<!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");
//計(jì)算mask的大小
mask.setSize=function(){
//獲取文檔可見區(qū)域?qū)挾炔⒃O(shè)置到mask上
var de=document.documentElement;
mask.style.width=de.clientWidth+"px"
mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
//隱藏頁(yè)面的滾動(dòng)條
document[
isIE<9?"documentElement":"body"
].style.overflow="hidden";
//計(jì)算mask的大小
mask.setSize();
//顯示
mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
//顯示頁(yè)面滾動(dòng)條
document[
isIE<9?"documentElement":"body"
].style.overflow="";
//清空里面的內(nèi)容
mask.td.innerHTML="";
//隱藏
mask.style.display="none";
};
//添加append方法
mask.append=function(e){
//在mask的TD里面添加內(nèi)容哦你
mask.td.appendChild(e);
};
//點(diǎn)擊mask關(guān)閉
mask.onclick=function(e){
//判斷事件來(lái)源，如果是空白區(qū)域被點(diǎn)擊了就關(guān)閉mask
e=e||event;
(e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗體大小改變時(shí)也改變mask的大小
window.onresize=function(){
mask.setSize();
};
//點(diǎn)擊圖片的事件
img.onclick=function(){
//創(chuàng)建一個(gè)圖片對(duì)象
var o=new Image;
//設(shè)置圖片的地址
o.src=img.src;
//在mask內(nèi)添加內(nèi)容
mask.append(o);
//顯示mask
mask.show();
};
</script>
這個(gè)效果是沒有什么難點(diǎn)了，最困難的也許就是半透明的實(shí)現(xiàn)了吧。CSS3的opacity和IE的alpha都可以實(shí)現(xiàn)半透明，但是那是整個(gè)元素的半透明。使用那種方法就意味著子元素也被半透明了，所以我們必須把透明設(shè)置到背景上，而不是整個(gè)元素上。CSS3中可以直接使用rgba來(lái)設(shè)置。IE中沒有這樣的方法，但是可以使用漸變?yōu)V鏡來(lái)代替它，因?yàn)闈u變?yōu)V鏡也是支持透明的。還有，在IE9中，同時(shí)兼容CSS3的透明和濾鏡的透明，如果兩個(gè)都使用，頁(yè)面的透明度就會(huì)不對(duì)。所以我們?cè)贗E9中屏蔽了其中一種透明效果。
還有一點(diǎn)問(wèn)題就是兼容IE6的，IE6不支持fixed所以我們需要使用absolute和動(dòng)態(tài)設(shè)置top來(lái)兼容它。然后就是mask的大小計(jì)算問(wèn)題，這個(gè)也存在一個(gè)瀏覽器差異，其實(shí)這個(gè)效果中的瀏覽器差異問(wèn)題還是挺大的，不過(guò)都是一些小問(wèn)題看到了就會(huì)明白沒有長(zhǎng)篇大論的必要。