jsカバー層の切り出し効果を実現------Day 77

カバー層を入れるのと同じように、単純なカバー層を描くのは簡単ですが、ここでは簡単ではありません.そして、存在するdivを表示するのではなく、面倒な生成divを選びました.ここでは特に注意しなければなりません.
1、カバー層が現れた後、マウスは動かなくても、カバー層の上にあり、div領域が与えられなくなったので、傍受の位置に注意する.
2、onmouseoutとonmouseoverは瞬時にトリガーされることが重要です.
3、実際の応用では、既存のdivの表示は一時的に作成するよりも有効である.
これで私はやはりコードをつけましょう.実は前の場所はあまり変わっていません.私は変更した場所だけを記録します.それはonmouseoutの傍受がどこに追加されたのですか.

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

このように简単にすべて划入の効果を実现して、简単に见ると确かにすでにその形があって、しかし言わざるを得なくて、これは拙劣で极点の実现で、まだどれだけの点がまだ加入していないので、まだどれだけの情况がまだ考虑していないので、また、このコードの缲り返しの编纂、最适化の最适化、ほら...