JavaScript编写页面半透明遮罩效果的简单示例
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生js实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生js有所帮助
<div> <h4><span>现在注册</span><span>关闭</span></h4> <p> <label>用户名</label> <inputtype="text"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/> </p> <p> <label>密码</label> <inputtype="password"class="myinp"onmouseover="this.style.border='1pxsolid#f60'"onfoucs="this.style.border='1pxsolid#f60'"onblur="this.style.border='1pxsolid#ccc'"/> </p> <p> <inputtype="submit"value="注册"class="sub"/> <inputtype="reset"value="重置"class="sub"/> </p> </div> <div></div><!--遮罩层div--> <scripttype="text/javascript"> varmyAlert=document.getElementById("alert"); varmyMask=document.getElementById('mask'); varreg=document.getElementById("content").getElementsByTagName("a")[0]; varmClose=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>
全屏幕遮盖
<!DOCTYPEhtml> <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" /> <tableid="mask"><tr><tdid="mask_td"></td></tr></table> <script> //判断浏览器 varisIE=navigator.userAgent.match(/MSIE(\d)/i); isIE=isIE?isIE[1]:isIE; //声明变量 varimg,mask; //获取元素 img=document.getElementById("img"); mask=document.getElementById("mask"); mask.td=document.getElementById("mask_td"); //计算mask的大小 mask.setSize=function(){ //获取文档可见区域宽度并设置到mask上 varde=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(){ //创建一个图片对象 varo=newImage; //设置图片的地址 o.src=img.src; //在mask内添加内容 mask.append(o); //显示mask mask.show(); }; </script>