對于web應用開發者，當用戶進行界面瀏覽時如果后臺程序處理程序時間較長，那么用戶在網頁的等待時間會較長，但是如果頁面上沒有一個比較友好的提示方式
（增加蒙灰效果），那么用戶體驗會不是特別良好，用戶不知道現在是不是應該點擊別的程序，用戶并不知道是不是應該繼續等待網頁，還是可以點擊別的頁面。
現在就有一個比較良好的交互，就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法。在此作者希望自己也能夠
使用原生的js實現自己的蒙灰效果。故自己做了嘗試。實現了蒙灰效果。在此我只關注實現，頁面美觀程度我沒有太多調整，所以頁面不太美觀。在此貼出實現代碼。
在CODE上查看代碼片派生到我的代碼片
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META CONTENT="EditPlus"> <META CONTENT=""> <META CONTENT=""> <META CONTENT=""> <style type="text/css"> .maskStyle { background-color:#B8B8B8; z-index:1; filter:alpha(opacity=50); opacity:0.8; position:absolute; text-align:center; color:blue; font:bold 1em "宋體",Arial,Times; height:25px; font-weight:bold; overflow:hidden;} </style> </HEAD> <script type="text/javascript"> function creatMaskLayer(effectItem,showText) { divItem = document.createElement("div"); divItem.className="maskStyle"; divItem.style.lineHeight=effectItem.offsetHeight+"px"; divItem.innerText=showText; divItem.style.width=effectItem.offsetWidth; divItem.style.height=effectItem.offsetHeight; divItem.style.top=effectItem.offsetTop; divItem.style.left=effectItem.offsetLeft; return divItem; } function setMask() { var effectItem = document.getElementById("test"); var existMaskItem = findMaskItem(effectItem); if(existMaskItem) { return; } var showText = "加載中..."; effectItem.appendChild(creatMaskLayer(effectItem,showText)); } function removeMask() { var effectItem = document.getElementById("test"); var maskItem = findMaskItem(effectItem); if(maskItem) { effectItem.removeChild(maskItem); } } function findMaskItem(item) { var children = item.children; for(var i=0;i<children.length;i++) { if("maskStyle"==(children[i].className)) { return children[i]; } } } </script> <BODY> <input type="button" value="蒙灰"/> <input type="button" value="取消蒙灰"/> <br> <div> 蒙灰我吧 <input type="button" value="測試是否還能點擊"/> </div> </BODY> </HTML>
解釋一下代碼中比較重要的地方。
.maskStyle是蒙灰層的樣式
其中
在CODE上查看代碼片派生到我的代碼片
filter:alpha(opacity=50); opacity:0.8;
是代表蒙灰層透明度，filter屬性是為了兼容IE8瀏覽器
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。
PS：蒙灰效果需要把要蒙灰到element放到div中才可以
新聞熱點
疑難解答
圖片精選
