JavaScript編寫頁面半透明遮罩效果的簡單示例

更新時間：2016年05月09日 18:19:11 投稿：goldensun

這篇文章主要介紹了JavaScript編寫頁面半透明遮罩效果的簡單示例,包括一個全屏幕div層遮蓋的方法展示,需要的朋友可以參考下

半透明遮罩層效果基本上都是使用插件實現(xiàn)的，下面為大家分享下使用原生js實現(xiàn)半透明遮罩效果，感興趣的朋友可以參考下哈，希望對你熟悉原生js有所幫助

<div > 
<h4><span>現(xiàn)在注冊</span><span >關(guān)閉</span></h4> 
<p> 
<label> 用戶名</label> 
<input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<label> 密　碼</label> 
<input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'" onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'" /> 
</p> 
<p> 
<input type="submit" value="注冊" class="sub" /> 
<input type="reset" value="重置" class="sub" /> 
</p> 
</div> 
<div ></div><!-- 遮罩層div--> 
<script type="text/javascript"> 
var myAlert = document.getElementById("alert"); 
var myMask=document.getElementById('mask'); 
var reg = document.getElementById("content").getElementsByTagName("a")[0]; 
var mClose = document.getElementById("close"); 
reg.onclick = function() 
{ 
myMask.style.display="block"; 
myAlert.style.display = "block"; 
myAlert.style.position = "absolute"; 
myAlert.style.top = "50%"; 
myAlert.style.left = "50%"; 
myAlert.style.marginTop = "-75px"; 
myAlert.style.marginLeft = "-150px"; 
document.body.style.overflow = "hidden"; 
} 
mClose.onclick = function() 
{ 
myAlert.style.display = "none"; 
myMask.style.display = "none"; 
} 
</script> 
</body> 
</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(){
 //獲取文檔可見區(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(){
 //隱藏頁面的滾動條
 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="";
 //清空里面的內(nèi)容
 mask.td.innerHTML="";
 //隱藏
 mask.style.display="none";
};
//添加append方法
mask.append=function(e){
 //在mask的TD里面添加內(nèi)容哦你
 mask.td.appendChild(e);
};
//點擊mask關(guān)閉
mask.onclick=function(e){
 //判斷事件來源，如果是空白區(qū)域被點擊了就關(guān)閉mask
 e=e||event;
 (e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗體大小改變時也改變mask的大小
window.onresize=function(){
 mask.setSize();
};
//點擊圖片的事件
img.onclick=function(){
 //創(chuàng)建一個圖片對象
 var o=new Image;
 //設(shè)置圖片的地址
 o.src=img.src;
 //在mask內(nèi)添加內(nèi)容
 mask.append(o);
 //顯示mask
 mask.show();
};
</script>

您可能感興趣的文章: