Just like the masking layer is drawn, it is very simple to figure out if it is drawn, but it is not that simple here. Moreover, I chose a more troublesome div to generate instead of displaying the existing div. Here are a few points that need special attention:
1. After the cover layer appears, even if the mouse does not move, it is already on the cover layer and no longer gives the div area, so pay attention to the monitoring position;
2. Onmouseout and onmouseover are both triggered instantly, which is very important;
3. In actual applications, the display of existing divs is definitely much more effective than temporary creation;
I'd better put the code in this way. In fact, the previous place has not changed much. I only record the changes, which is 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 here, and the judgment of monitoring here is almost the same as the previous entry 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){//It is still the distance and width to change 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;//Keypoint}else{ marginLeft=marginLeft+10; width=width-10; div.style.width=width+"px"; div.style.left=marginLeft+"px"; } },30); } if(least==3){ } if(least==4){//Sign out to the left, width as a global variable, this time it is constantly reducing 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 more critical}else{ width=width-10; div.style.width=width+"px"; } },30); } }) return div; }In this way, the effect of marking out and entering is achieved. If you look at it simply, it is indeed in shape. However, it has to be said that this is an extremely clumsy implementation. How many points have not been added yet, and how many situations have not been considered. In addition, the repeated writing of this code, optimization and optimization, noo...