js melaksanakan kesan melukis lapisan topeng dengan menghasilkan div dan bukannya memaparkan kemahiran it

js melaksanakan kesan melukis lapisan topeng dengan menghasilkan div dan bukannya memaparkan kemahiran it_javascript

WBOY

Lepaskan： 2016-05-16 16:41:04

asal

1257 orang telah melayarinya

Sama seperti lukisan lapisan penutup, hanya menutup lapisan penutup adalah sangat mudah, tetapi di sini ia tidak begitu mudah, dan saya juga memilih div terjana yang lebih menyusahkan lebih awal, dan Daripada memaparkan div sedia ada, terdapat beberapa perkara yang memerlukan perhatian khusus:

1. Selepas lapisan penutup muncul, walaupun tetikus tidak bergerak, ia sudah berada di lapisan penutup, dan kawasan div tidak lagi diberikan, jadi perhatikan kedudukan pemantauan;

2. Onmouseout dan onmouseover kedua-duanya dicetuskan serta-merta, yang sangat penting;

3. Dalam aplikasi sebenar, paparan div sedia ada pasti lebih berkesan daripada penciptaan sementara;

Biar saya pergi ke kod sebenarnya, tempat sebelumnya saya hanya merekodkan tempat yang berubah.

Kesan goresan masuk dan keluar begitu sahaja jika dilihat secara ringkas, ianya telah pun terbentuk, namun saya perlu mengatakan bahawa ini adalah satu pelaksanaan yang sangat kekok tambah lagi. , terdapat banyak situasi yang belum diambil kira Selain itu, penulisan berulang dan pengoptimuman kod ini, baik...

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

Salin selepas log masuk