js實現飛入星星特效代碼

2024-05-06 16:09:51

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現飛入星星特效代碼,主要通過控制背景與飛入點的樣式,結合setTimeout函數即可實現星星飛入的效果,對于學習javascript有不錯的參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現飛入星星特效代碼，分享給大家供大家參考。

具體實現代碼如下：

復制代碼代碼如下:

		<html>
		<head>
		<title>星空極速飛入效果</title>
		<style type="text/css">
		<!--
		body {
		background-color: #000066;
		}
		-->
		</style>
		</head>
		<body>
		<script language="JavaScript">
		xL=8;
		xH=xW=xR=xE=xMY=xMX=xWd=xHd=0;
		xF=new Array();
		xY=new Array();
		xX=new Array();
		xS=new Array();
		xA=new Array();
		xB=new Array();
		ini=new Array();
		document.write('<div id="sdiv" style="position:absolute;top:0px;left:0px"><div style="position:relative">');
		for (i=0; i < xL; i++){
		 document.write('<div id="div" style="position:absolute;top:0;left:0;width:5px;height:5px;'+'font-size:10px;color:#ffffff">.</div>');
		}
		document.write('</div></div>');
		function Set(){
		 for (i=0; i < xL; i++){
		  transfer(i)
		  xF[i]=xW/14;
		 }
		}
		function Assign(){
		 sdiv.style.top=document.body.scrollTop;
		 for (i=0; i < xL; i++){
		  xF[i]-=xS[i]*25;
		  if (xF[i] < 4) xF[i]=3;
		  div[i].style.top =xY[i];
		  div[i].style.left=xX[i];
		  div[i].style.fontSize=xF[i];
		 }
		}
		function fly(){
		 xMY=window.document.body.clientHeight/2;
		 xMX=window.document.body.clientWidth/2;
		 xWd=Math.round(Math.random()*40+5);
		 xHd=Math.round(Math.random()*30+5);
		 for (i=0; i < xL; i++){
		  xY[i]=xA[i]+=(xMY-xA[i])*(xS[i]);
		  xX[i]=xB[i]+=(xMX-xB[i])*(xS[i]);
		  if ((xX[i] > xMX-xWd) && (xX[i] < xMX+xWd) && (xY[i] > xMY-xHd) && (xY[i] < xMY+xHd)){
		   transfer(i)
		  }
		  if ((xX[i]<0)||(xX[i]>xW)||(xY[i]<0)||(xY[i]>xH)){
		    xF[i]=xW/14;
		  }
		 }
		 Assign();
		 setTimeout('fly()',1);
		}
		function transfer(i){
		 xH=window.document.body.offsetHeight;
		 xW=window.document.body.offsetWidth;
		 xA[i]=Math.round(Math.random()*xH);
		 xB[i]=Math.round(Math.random()*xW);
		 xS[i]=Math.random()*0.05+0.05;
		 xR=Math.round(Math.random()*3);
		 xE=Math.round(Math.random()*50+50);
		 if (xR == 3) xB[i]=-xE;
		 if (xR == 2) xB[i]=xW+xE;
		 if (xR == 1) xA[i]=-xE;
		 if (xR == 0) xA[i]=xH;
		}
		Set();
		fly();
		</script>
		</body>
		</html></td>
		   </tr>
		 </table>