Node.js는 display_javascript 기술 대신 div를 생성하기 위해 마스크 레이어 그리기 효과를 구현합니다.

커버링 레이어 드로잉 인과 마찬가지로 단순히 커버링 레이어를 덮는 것은 매우 간단하지만 여기서는 그렇게 간단하지 않으며 앞서 생성된 더 귀찮은 div를 선택했고 기존 div를 표시하는 대신 특별한 주의가 필요한 몇 가지 사항:

1. 커버링 레이어가 나타난 후 마우스가 움직이지 않아도 이미 커버링 레이어 위에 있고 div 영역이 더 이상 주어지지 않으므로 모니터링 위치에 주의하세요.

2. Onmouseout과 onmouseover는 모두 즉시 실행되며 이는 매우 중요합니다.

3. 실제 애플리케이션에서는 임시 생성보다 기존 div를 표시하는 것이 확실히 더 효과적입니다.

코드를 살펴보겠습니다. 실제로 이전 장소는 크게 변경되지 않았습니다. 거기에 onmouseout 모니터링이 추가되었습니다.

var getOneDiv=function(){ 

var div=document.createElement("div"); 
div.style.position="absolute"; 
div.style.display="block"; 
div.style.zIndex="10"; 
div.style.background="yellow"; 
div.addEventListener("mouseout",function(event){//我把它加在了这里，而这里监听的判断与之前的划入几乎如出一辙 
var x=event.clientX; 
var y=event.clientY; 
left=x-test.offsetLeft; 
top=y-test.offsetTop; 
right=test.offsetLeft+test.offsetWidth-x; 
bottom=test.offsetTop+test.offsetHeight-y; 
arr=[]; 
arr.push(top); 
arr.push(right); 
arr.push(bottom); 
arr.push(left); 
var least=findLeast(arr); 


if(least==1){ 
} 
if(least==2){//还是距离和宽度的同时改变啊 
div.style.left=test.offsetLeft+"px"; 
div.style.top=test.offsetTop+"px"; 
div.style.height=test.offsetHeight+"px"; 
div.style.width=width+"px"; 
var changeWidth2=setInterval(function(){ 
if(div.offsetLeft>=test.offsetLeft+test.offsetWidth){ 
clearInterval(changeWidth2); 
check=true;//关键点 
}else{ 
marginLeft=marginLeft+10; 
width=width-10; 
div.style.width=width+"px"; 
div.style.left=marginLeft+"px"; 
} 
},30); 
} 
if(least==3){ 

} 
if(least==4){//向左划出，width作为全局变量，这次就是不断减小了 
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; 
}

교차 효과를 얻는 것은 너무나 간단합니다. 간단히 보면 이미 형태가 잡혀 있지만, 아직까지 구현이 매우 서투른 부분이 많습니다. 아직 추가되지 않았네요. 게다가 이 코드를 반복해서 작성하고 최적화하는 것도 고려되지 않은 상황이 많습니다...