Using native js to implement the page ash of mask effect sample code

  • 2020-03-30 03:24:08
  • OfStack

For web application developers, if the background program processor takes a long time when the user is browsing the interface, the user will have a long wait time on the page, but if there is no friendly prompt on the page

(add the ash effect), then the user experience will not be particularly good, the user does not know now should click on another program, the user does not know whether should continue to wait for the web page, or can click on another page.

Use native js to achieve their own ash effect. So I tried. Achieved the ash effect. Here I just focus on the implementation, I haven't adjusted the page aesthetics too much, so the page isn't pretty. The implementation code is posted here.

View the CODE slice on CODE to derive to my CODE slice


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" 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 " Song typeface ",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 = " In the load ..."; 
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=" ashes " onclick="setMask()"/> 
<input type="button" value=" Cancel the ashes " onclick="removeMask()"/> 
<br> 
<div id="test" style="border:1px solid;width:300px;height:300px"> 
 Ashes me  
<input type="button" value=" Test if you can still click " onclick="alert('OK!')"/> 
</div> 
</BODY> 
</HTML>


Explain the important parts of the code.

.maskstyle is the style of the ash layer

Among them
View the CODE slice on CODE to derive to my CODE slice


filter:alpha(opacity=50); 
opacity:0.8; 

The filter attribute is for IE8 compatibility

The z-index attribute sets the stacking order of the elements. Elements with a higher stack order are always ahead of elements with a lower stack order.

PS: the ash effect requires you to put the ash into the element and div


Related articles: