Verwenden Sie natives JS, um Beispielcode_Javascript-Kenntnisse für Seitenmaskeneffekte zu erzielen-js-Tutorial-php.cn

Verwenden Sie natives JS, um Beispielcode_Javascript-Kenntnisse für Seitenmaskeneffekte zu erzielen

WBOY

Freigeben： 2016-05-16 16:43:42

Original

1463 Leute haben es durchsucht

Wenn für Webanwendungsentwickler die Verarbeitungszeit des Hintergrundprogramms lang ist, wenn der Benutzer die Benutzeroberfläche durchsucht, ist die Wartezeit des Benutzers auf der Webseite länger, aber wenn es auf der Seite keine benutzerfreundliche Eingabeaufforderungsmethode gibt

(Hinzufügen eines Graueffekts), dann ist das Benutzererlebnis nicht besonders gut, und der Benutzer weiß nicht, ob er jetzt auf ein anderes Programm klicken soll, und der Benutzer weiß nicht, ob er weiterhin auf die Webseite warten soll Klicken Sie auf eine andere Seite.

Jetzt gibt es eine relativ gute Interaktion, nämlich einen Graueffekt hinzuzufügen. Die Funktionen mask() und unmask() des js-Frameworks Extjs bieten einen Graufärbungseffekt. Natürlich bietet jquery auch diese Graufärbungsmethode. Der Autor hier hofft, dass er es auch kann

Verwenden Sie natives js, um Ihren eigenen Graueffekt zu erzielen. Also habe ich es selbst versucht. Erzielt einen Graueffekt. Hier konzentriere ich mich nur auf die Implementierung. Ich habe nicht viel an der Schönheit der Seite angepasst, daher ist die Seite nicht sehr schön. Veröffentlichen Sie hier den Implementierungscode.

Codeausschnitte auf CODE anzeigen, die von meinen Codeausschnitten abgeleitet sind

<!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 "宋体",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="蒙灰" onclick="setMask()"/> 
<input type="button" value="取消蒙灰" onclick="removeMask()"/> 
<br> 
<div id="test" style="border:1px solid;width:300px;height:300px"> 
蒙灰我吧 
<input type="button" value="测试是否还能点击" onclick="alert('OK!')"/> 
</div> 
</BODY> 
</HTML>

Nach dem Login kopieren

Erklären Sie die wichtigeren Teile des Codes.

.maskStyle ist der Stil der grauen Ebene

Welches
Codeausschnitte auf CODE Abgeleitet von meinen Codeausschnitten

anzeigen

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

Nach dem Login kopieren

stellt die Transparenz der grauen Ebene dar und das Filterattribut dient der Kompatibilität mit dem IE8-Browser

Das Z-Index-Attribut legt die Stapelreihenfolge der Elemente fest. Elemente mit einer höheren Stapelreihenfolge erscheinen immer vor Elementen mit einer niedrigeren Stapelreihenfolge.

PS: Für einen Graueffekt müssen Sie das Element, das grau werden soll, in ein Div einfügen