JavaScript編寫點擊可查看大圖的頁面半透明遮罩層效果實例_javascript技巧
- WBOY原創
- 2016-05-16 09:00:261512瀏覽
這個效果用的很頻繁，常常都會有人問我這個問題，所以要把它寫成文章。下次再有人問就直接把這篇文章的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的大小計算問題，這個也存在一個瀏覽器差異，其實這個效果中的瀏覽器差異問題還是挺大的，不過都是一些小問題看到了就會明白沒有長篇大論的必要。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn