js は、display_javascript スキルの代わりに div を生成するマスク レイヤー描画効果を実装します。

被覆レイヤーを描画するのと同様に、被覆レイヤーを塗りつぶすだけでも非常に簡単ですが、ここではそれほど単純ではありません。先ほど生成されたより面倒な 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; 
}

クロスインとアウトの効果を実現するのは非常に簡単ですが、単純に見ればすでに形になっていますが、これは非常に不器用な実装であると言わざるを得ません。まだ追加されていないので、このコードの繰り返しの作成と最適化が考慮されていないことがたくさんあります。