기본 js를 사용하여 페이지 마스크 효과 샘플 code_javascript 기술 달성
- WBOY원래의
- 2016-05-16 16:43:421505검색
웹 애플리케이션 개발자의 경우 사용자가 인터페이스를 탐색할 때 백그라운드 프로그램 처리 시간이 길면 웹 페이지에서 사용자의 대기 시간이 길어지지만 페이지에 친숙한 프롬프트 방법이 없으면
(회색 효과 추가) 그러면 사용자 경험이 특히 좋지 않을 것입니다. 사용자는 지금 다른 프로그램을 클릭해야 할지, 웹 페이지를 계속 기다려야 할지 아니면 웹 페이지를 기다려야 할지 알 수 없습니다. 다른 페이지를 클릭하세요.
이제 회색 효과를 추가하는 비교적 좋은 상호 작용이 있습니다. js 프레임워크 Extjs의 Mask() 및 unmask() 함수는 회색 효과를 제공합니다. 물론 jquery도 이 회색 효과를 제공합니다. 여기 저자는
네이티브 js를 사용하여 나만의 회색 효과를 얻으세요. 그래서 제가 직접 시도해봤습니다. 회색 효과를 얻었습니다. 여기서는 구현에만 중점을 두었습니다. 페이지의 아름다움을 많이 조정하지 않았기 때문에 페이지가 그다지 아름답지는 않습니다. 여기에 구현 코드를 게시하세요.
내 코드 조각에서 파생된 CODE의 코드 조각 보기
<!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>
코드의 더 중요한 부분을 설명하십시오.
.maskStyle은 회색 레이어의 스타일입니다
어느
내 코드 조각에 파생된 CODE에서 코드 조각 보기
filter:alpha(opacity=50); opacity:0.8;
은 회색 레이어의 투명도를 나타내며, 필터 속성은 IE8 브라우저와의 호환성을 위한 것입니다
z-index 속성은 요소의 스택 순서를 설정합니다. 더 높은 스택 순서를 가진 요소는 항상 더 낮은 스택 순서를 가진 요소 앞에 나타납니다.
PS: 회색화 효과를 얻으려면 회색화할 요소를 div에 넣어야 합니다