마스킹 레이어가 그려진 것처럼, 그려 졌는지 알아내는 것은 매우 간단하지만 여기서 간단하지는 않습니다. 또한, 기존 DIV를 표시하는 대신 생성 할 더 번거로운 Div를 선택했습니다. 특별한주의가 필요한 몇 가지 사항은 다음과 같습니다.
1. 커버 레이어가 나타나면 마우스가 움직이지 않더라도 이미 덮개 계층에 있고 더 이상 DIV 영역을 제공하지 않으므로 모니터링 위치에주의를 기울입니다.
2. Onmouseout과 Onmouseover는 모두 즉시 트리거되어 매우 중요합니다.
3. 실제 응용 분야에서 기존 DIV의 표시는 임시 생성보다 훨씬 효과적입니다.
이런 식으로 코드를 넣는 것이 좋습니다. 실제로, 이전 장소는 크게 변하지 않았습니다. OnmouseOut 리스너가 추가되는 곳인 변경 사항 만 기록합니다.
var getonediv = function () {var div = document.createElement ( "div"); div.style.position = "절대"; div.style.display = "block"; div.style.zindex = "10"; div.style.background = "Yellow"; div.addeventListener ( "마우스 아웃", 함수 (이벤트) {// 여기에 추가했으며 여기에 모니터링의 판단은 이전 항목 var x = event.clientx; var y = event.clienty; left = x-test.offsetleft; top = y-test.offsettop; right = right = test.offsettwidthewidth-x; test.offsetheight. div.left = test.offsetleft+"px"; if (div.offsetLeft) {cheecks = true} if (최소 == 3) {} if (최소 == 4) {// 왼쪽에 서명, 너비는 글로벌 변수로, 이번에는 div.style.left = test.offsetleft+"px"를 지속적으로 줄입니다. div.style.top = test.offsettop+"px"; div.style.height = test.offsetheight+"px"; div.style.width = width+"px"; var changeWidth1 = setInterVal (function () {if (div.offsetWidth <= 0) {clearInterVal (changeWidth1); check = true; // 또한 더 중요합니다} else {width = width-10; div.style.width = width+"px";}, 30); }}) return div; }이런 식으로, 표시 및 입력의 효과가 달성됩니다. 간단하게 보면 실제로 모양이 있습니다. 그러나 이것은 매우 어색한 구현이라고 말해야합니다. 아직 추가되지 않은 포인트 수와 몇 개의 상황이 고려되지 않은지. 또한이 코드의 반복적 인 글, 최적화 및 최적화, Noo ...