js implémente l'effet de dessiner la couche de masque en générant un div au lieu d'afficher les compétences it_javascript

Semblable au dessin de la couche de recouvrement, recouvrir simplement la couche de recouvrement est très simple, mais ici ce n'est pas si simple, et j'ai également choisi un div généré plus gênant plus tôt, et au lieu d'afficher les divs existants, il y a un quelques points qui nécessitent une attention particulière :

1. Après l'apparition du calque de recouvrement, même si la souris ne bouge pas, elle est déjà sur le calque de recouvrement, et la zone div n'est plus donnée, alors faites attention à la position de surveillance

2. Onmouseout et onmouseover sont tous deux déclenchés instantanément, ce qui est très important

3. Dans les applications réelles, l'affichage des divs existants est nettement plus efficace que la création temporaire ;

Laissez-moi revoir le code. En fait, la place précédente n'a pas beaucoup changé. J'enregistre seulement les places modifiées. C'est là que la surveillance onmouseout est ajoutée ?

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

L'effet du grattage de l'intérieur et de l'extérieur est tout simplement réalisé. Si vous le regardez simplement, il a déjà pris forme. Cependant, je dois dire qu'il s'agit d'une mise en œuvre extrêmement maladroite. ajouté encore. , il y a beaucoup de situations qui n'ont pas été prises en compte. De plus, l'écriture et l'optimisation répétées de ce code, eh bien...

.