JavaScript编写页面半透明遮罩效果的简单示例.doc

资源描述

这篇文章主要介绍了JavaScript编写页面半透明遮罩效果的简单示例,包括一个全屏幕div层遮盖的方法展示,需要的朋友可以参考下　　半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生js实现半透明遮罩效果，感兴趣的朋友可以参考下哈，希望对你熟悉原生js有所帮助　　<div >  　　<h4><span>现在注册</span><span >关闭</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>  　　<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- 　　 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>

展开阅读全文