使用原生js實作頁面蒙灰(mask)效果範例程式碼

首頁

web前端

js教程

使用原生js實作頁面蒙灰(mask)效果範例程式碼_javascript技巧

May 16, 2016 pm 04:43 PM

原生js

對於web應用程式開發者，當使用者進行介面瀏覽時如果後台程式處理程序時間較長，那麼使用者在網頁的等待時間會較長，但是如果頁面上沒有一個比較友善的提示方式

（增加蒙灰效果），那麼使用者體驗會不是特別良好，使用者不知道現在是否應該點擊別的程序，使用者並不知道是不是應該繼續等待網頁，還是可以點擊別的頁面。

現在就有一個比較良好的交互，就是增加蒙灰效果。像js的框架Extjs的mask()和unmask()功能提供了蒙灰效果，當然jquery也提供了這種蒙灰方法。在此作者希望自己也能夠

使用原生的js實現自己的蒙灰效果。故自己做了嘗試。實現了蒙灰效果。在此我只關注實現，頁面美觀程度我沒有太多調整，所以頁面不太美觀。在此貼出實作代碼。

在CODE上查看程式碼片衍生到我的程式碼片

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; 
&lt;HTML&gt; 
&lt;HEAD&gt; 
&lt;TITLE&gt; New Document &lt;/TITLE&gt; 
&lt;META NAME="Generator" CONTENT="EditPlus"&gt; 
&lt;META NAME="Author" CONTENT=""&gt; 
&lt;META NAME="Keywords" CONTENT=""&gt; 
&lt;META NAME="Description" CONTENT=""&gt; 
&lt;style type="text/css"&gt; 
.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; 
 
} 
&lt;/style&gt; 
&lt;/HEAD&gt; 
&lt;script type="text/javascript"&gt; 
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&lt;children.length;i++) { 
if("maskStyle"==(children[i].className)) { 
return children[i]; 
} 
} 
} 
&lt;/script&gt; 
&lt;BODY&gt; 
&lt;input type="button" value="蒙灰" onclick="setMask()"/&gt; 
&lt;input type="button" value="取消蒙灰" onclick="removeMask()"/&gt; 
&lt;br&gt; 
&lt;div id="test" style="border:1px solid;width:300px;height:300px"&gt; 
蒙灰我吧 
&lt;input type="button" value="测试是否还能点击" onclick="alert('OK!')"/&gt; 
&lt;/div&gt; 
&lt;/BODY&gt; 
&lt;/HTML&gt;