js implementiert den Effekt des Herausziehens der Maskenebene, indem ein Div generiert wird, anstatt it_javascript-Fähigkeiten anzuzeigen

Ähnlich wie beim Einzeichnen der Deckschicht ist es sehr einfach, die Deckschicht einfach abzudecken, aber hier ist es nicht so einfach, und ich habe früher auch ein problematischeres generiertes Div ausgewählt, und anstelle der Anzeige vorhandener Divs gibt es ein einige Punkte, die besondere Aufmerksamkeit erfordern:

1. Nachdem die Abdeckschicht angezeigt wurde, befindet sie sich bereits auf der Abdeckschicht und der Div-Bereich ist nicht mehr angegeben. Achten Sie daher auf die Überwachungsposition

2. Onmouseout und Onmouseover werden beide sofort ausgelöst, was sehr wichtig ist;

3. In tatsächlichen Anwendungen ist die Anzeige vorhandener Divs definitiv effektiver als die temporäre Erstellung

Lassen Sie mich den Code durchgehen. Tatsächlich hat sich an der vorherigen Stelle nicht viel geändert. Dort wird die Onmouseout-Überwachung hinzugefügt.

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; 
}

Die Wirkung des Ein- und Ausstreichens ist einfach erkennbar. Allerdings muss ich sagen, dass es sich hier um eine äußerst ungeschickte Umsetzung handelt Noch hinzugefügt, es gibt viele Situationen, die nicht berücksichtigt wurden, außerdem das wiederholte Schreiben und Optimieren dieses Codes, na ja...