DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript編寫點擊查看大圖的頁面半透明遮罩層效果實例
JavaScript編寫點擊查看大圖的頁面半透明遮罩層效果實例
編輯:關於JavaScript     

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved