JavaScript編寫頁面半透亮遮罩效果的簡潔示例_

1、JavaScript編寫頁面半透亮遮罩效果的簡潔示例_ 這篇文章主要介紹了JavaScript編寫頁面半透亮遮罩效果的簡潔示例,包括一個全屏幕div層遮蓋的方法展現(xiàn),需要的伴侶可以參考下 半透亮遮罩層效果基本上都是用法插件實現(xiàn)的，下面為大家分享下用法原生js實現(xiàn)半透亮遮罩效果，感愛好的伴侶可以參考下哈，盼望對你熟識原生js有所關(guān)心 div h4span現(xiàn)在注冊/spanspan 關(guān)閉/span/h4 p label 用戶名/label input type=text class=myinp onmouseover=this.style.border=1px solid #f60 onfoucs

2、=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 /

3、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.o

4、nclick = 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()

5、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:transparent9; filter:progid:DXImageTransf

6、orm.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000 ); display:none; #mask_td text-align:center; /style img src=http:/web- width=100 id=img / table id=masktrtd id=mask_td/td/tr/table script /推斷掃瞄器 var isIE=navigator.userAgent.match(/MSIE (d)/i); isIE=isIE?isIE1:isIE; /聲明變量 var img,

7、mask; /獵取元素 img=document.getElementById(img); mask=document.getElementById(mask); mask.td=document.getElementById(mask_td); /計算mask的大小 mask.setSize=function() /獵取文檔可見區(qū)域?qū)挾炔⒃O置到mask上 var de=document.documentElement; mask.style.width=de.clientWidth+px mask.style.height=de.clientHeight+px; ; /添加show方法 ma

8、sk.show=function() /隱蔽頁面的滾動條 document isIE9?documentElement:body .style.overflow=hidden; /計算mask的大小 mask.setSize(); /顯示 mask.style.display=isIE=6?block:table; ; /添加hide方法 mask.hide=function() /顯示頁面滾動條 document isIE9?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.tdmask.hide(); ; /窗體大小轉(zhuǎn)變時也轉(zhuǎn)變mask的大小 window.onresize=function() mask.setSize(); ; /點擊