Similar to the covering layer drawing in, simply covering out the covering layer is very simple, but here it is not so simple, and I also chose a more troublesome generated div earlier, and Instead of displaying existing divs, there are a few points that need special attention:
1. After the covering layer appears, even if the mouse does not move, it is already on the covering layer, and the div area is no longer given, so pay attention to the monitoring position;
2. Onmouseout and onmouseover are both triggered instantaneously, which is very important;
3. In actual applications, the display of existing divs is definitely more effective than temporary creation;
Let me go over the code. In fact, the previous place has not changed much. I only record the changed places. That is where the onmouseout monitoring 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){//我把它加在了这里,而这里监听的判断与之前的划入几乎如出一辙 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; }
It is so simple to achieve the effect of crossing in and out. If you look at it simply, it has already taken shape, but I have to say that this is an extremely clumsy implementation. There are still many points that have not been added yet. , there are many situations that have not been taken into consideration. In addition, the repeated writing and optimization of this code, well...