The js implementation shading effect is to generate a div instead of a display

As with the cover layer delimiting, the simple cover layer underlining is very simple, but here it is not so simple, and I also chose a more troublesome generation div, not to show the existence of the div, here are a few points to pay special attention to:

1, after the cover layer, even if the mouse does not move, is already on the cover layer, has no longer given the div region, so pay attention to the monitoring position;

2. It is important that both onmouseout and onmouseover are instantaneous;

3, in practice, the existing div display than temporary creation is certainly more effective;

So I'm going to go ahead and do the code, and it's not really changed, I'm just going to record the change, and that's where the onmouseout listener is added.

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){//I added it up here, and the judgment of the monitor here is almost exactly the same as it was before
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){//I'm going to change the distance and the width at the same time
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;//The key point
}else{ 
marginLeft=marginLeft+10; 
width=width-10; 
div.style.width=width+"px"; 
div.style.left=marginLeft+"px"; 
} 
},30); 
} 
if(least==3){ 

} 
if(least==4){//I'm going to draw it to the left, and the width is the global variable, and this time it's going to get smaller and smaller
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;//This is also the key
}else{ 
width=width-10; 
div.style.width=width+"px"; 
} 
},30); 
} 
}) 
return div; 
}

Is such simple implementation to draw into effect, simple look really already has its shape, but have to say that this is a bad on top of the world, how many point is not to join, how much is also not considered, in addition, this code writing, optimize the optimization, mew mew...