웹 애플리케이션 개발자의 경우 사용자가 인터페이스를 탐색 할 때 배경 프로그램이 오랫동안 프로그램을 처리하는 경우 사용자는 웹 페이지에서 더 오랜 시간을 기다릴 것입니다.
(먼지의 영향을 증가시키기 위해 추가) 그러면 사용자 경험이 특히 좋지 않습니다. 사용자는 지금 다른 프로그램을 클릭 해야하는지 알지 못하며 사용자는 웹 페이지를 계속 기다려야하는지 또는 다른 페이지를 클릭 할 수 있는지 알지 못합니다.
먼지의 영향을 증가시키는 상대적으로 좋은 상호 작용이 있습니다. Framework ExtJS와 마찬가지로 ExtJS의 Mask () 및 Unmask () 기능은 회색 효과를 제공하며 JQuery는이 회색 방법을 제공합니다. 여기서 저자는 그가 할 수 있기를 희망합니다
기본 J를 사용하여 자신의 회색 효과를 달성하십시오. 그래서 나는 스스로 시도했다. 먼지의 효과를 달성했습니다. 여기서는 구현에만 초점을 맞추고 있습니다. 나는 페이지의 미학에 대해 크게 조정하지 않았으므로 페이지는 그다지 아름답 지 않습니다. 여기에 구현 코드를 게시하십시오.
코드에서 내 코드 조각에 파생 된 코드 조각보기
<! docType html public "-// w3c // dtd html 4.0 transitional // en"> <html> <head> <title> 새로운 문서 </title> <meta name = "generator"content = "editPlus"> <meta name = "author"content = ""> type = "text/css"> .maskstyle {배경색 :#b8b8b8; z- 인덱스 : 1; 필터 : 알파 (불투명도 = 50); 불투명도 : 0.8; 위치 : 절대; 텍스트 정렬 : 센터; 색상 : 파란색; 글꼴 : Bold 1em "安体", Arial, Times; 높이 : 25px; 글꼴 중량 : 대담한; 오버플로 : 숨겨진; }. 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; 반환 문제; } function setMask () {var effectitem = document.getElementById ( "test"); var excientmaskitem = findmaskitem (effectItem); if (excientmaskitem) {return; } var showtext = "로드 ..."; effectitem.appendChild (CreatmaskLayer (effectItem, showtext)); } 함수 removeMask () {var effectItem = document.getElementById ( "test"); var maskitem = findmaskitem (effectitem); if (maskitem) {effectitem.removechild (maskitem); }} 함수 findmaskitem (항목) {var children = item.children; for (var i = 0; i <children.length; i ++) {if ( "maskstyle"== (children [i] .classname)) {return children [i]; }}}} </script> <body> <입력 유형 = "button"value = "canceled"onclick = "setMask ()"/> <입력 유형 = "button"value = "canceled"onclick = "removeMask ()"/> <br> <div id = "test"style = "테두리 : 1px solid; 300px; value = ""OnClick = "Alert ( 'Ok!')"/> </div> </body> </html>을 클릭 할 수 있는지 테스트하십시오코드의 중요한 부분을 설명하십시오.
마스크 스타일은 회색 레이어 스타일입니다
~에
코드에서 내 코드 조각에 파생 된 코드 조각보기
필터 : 알파 (불투명도 = 50); 불투명도 : 0.8;
회색 레이어의 투명성을 나타내며 필터 속성은 IE8 브라우저와 호환됩니다.
Z-Index 속성은 요소의 스태킹 순서를 설정합니다. 스태킹 순서가 높은 요소는 항상 스태킹 순서가 낮은 요소 앞에 있습니다.
추신 : 먼지의 영향은 DIV에 배치하기 위해 요소로 먼지를 뿌려야합니다.