JavaScript生成的动态下雨背景效果实现方法
本文实例讲述了JavaScript生成的动态下雨背景效果实现方法。分享给大家供大家参考。具体实现方法如下：
<HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODYbgcolor="#fef4d2"> <center> <scriptlanguage=JavaScript> <!--[Step1]:在此能够设置雨滴的多少--> varrainsize=40; <!--[Step2]:这里可以更改下雨的速度，数值大速度慢--> varspeed=10; varx=newArray(); vary=newArray(); varr=newArray(); varcx=newArray(); varcy=newArray(); vardoc_width=document.body.clientWidth; vardoc_height=document.body.clientHeight;
for(i=0;i<rainsize;++i){ initRain(); if(i==0){ document.write("<divid=\"dot"+i+"\"style=\"POSITION:"); document.write("absolute;Z-INDEX:"+i+";VISIBILITY:"); document.write("visible;TOP:15px;LEFT:15px;\"><fontcolor=\"blue\">"); document.write(",</font></div>");} else{ document.write("<divid=\"dot"+i+"\"style=\"POSITION:"); document.write("absolute;Z-INDEX:"+i+";VISIBILITY:"); document.write("visible;TOP:15px;LEFT:15px;\"><fontcolor=\"blue\">"); document.write(",.</font></div>"); } }
functioninitRain(){ a=6; r[i]=1; sn=Math.sin(a); cs=Math.cos(a); cx[i]=Math.random()*doc_width+1; cy[i]=Math.random()*doc_height+1; x[i]=r[i]*sn+cx[i]; y[i]=cy[i]; }
functionraindropIE(){ for(i=0;i<rainsize;++i){ updateRain(); if((x[i]<=1)||(x[i]>=(doc_width-20))||(y[i]>=(doc_height-20))){ makeRain(); doc_width=document.body.clientWidth; doc_height=document.body.clientHeight;} document.all["dot"+i].style.pixelTop=y[i]; document.all["dot"+i].style.pixelLeft=x[i];} setTimeout("raindropIE()",speed); } functionupdateRain(){ r[i]+=10; x[i]=r[i]*sn+cx[i]; y[i]=r[i]*cs+cy[i]; } functionmakeRain(){ r[i]=1; cx[i]=Math.random()*doc_width+1; cy[i]=1; x[i]=r[i]*sn+cx[i]; y[i]=r[i]*cs+cy[i]; } raindropIE(); </script> </BODY> </HTML>