js實現(xiàn)飛入星星特效代碼
更新時間：2014年10月17日 15:11:13 投稿：shichen2014
這篇文章主要介紹了js實現(xiàn)飛入星星特效代碼,主要通過控制背景與飛入點的樣式,結(jié)合setTimeout函數(shù)即可實現(xiàn)星星飛入的效果,對于學(xué)習javascript有不錯的參考借鑒價值,需要的朋友可以參考下
本文實例講述了js實現(xiàn)飛入星星特效代碼，分享給大家供大家參考。
具體實現(xiàn)代碼如下：
復(fù)制代碼 代碼如下:
<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>
<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>
希望本文所述對大家的javascript程序設(shè)計有所幫助
相關(guān)文章
這篇文章主要介紹了JavaScript中計算網(wǎng)頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下2015-06-06
這篇文章主要為大家詳細介紹了微信小程序云開發(fā)，搭建一個管理小程序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
這篇文章主要介紹了微信小程序錄音與播放錄音功能,小程序中提供了兩種錄音的API，舊版本錄音功能和新版錄音功能，需要的朋友可以參考下2017-12-12
javascript的除法結(jié)果會有誤差，在兩個浮點數(shù)相除的時候會比較明顯。這個函數(shù)返回較為精確的除法結(jié)果2012-07-07
這篇文章主要介紹了微信小程序Flex布局用法,深入淺出地羅列分析了flex彈性布局常見的屬性、功能及使用方法,需要的朋友可以參考下2019-04-04
Echarts地圖添加引導(dǎo)線效果(labelLine)
這篇文章主要介紹了Echarts地圖添加引導(dǎo)線效果(labelLine)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-09-09
前端JavaScript實現(xiàn)本地模糊搜索功能的方法實例
對于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來做。但是有時候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗,這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷
這篇文章主要介紹了js針對ip地址、子網(wǎng)掩碼、網(wǎng)關(guān)的邏輯性判斷，感興趣的小伙伴們可以參考一下2016-01-01
javascript獲取重復(fù)次數(shù)最多的字符
本文給大家講述的是使用javascript實現(xiàn)獲取重復(fù)次數(shù)最多的字符，代碼很簡單，有需要的小伙伴可以參考下。2015-07-07
Javascript中return與閉包對大家來說應(yīng)該都不陌生，下面本文就給大家介紹了Javascript中return的使用與閉包。文中給出了詳細的示例代碼，對大家的理解和學(xué)習具有一定的參考借鑒價值，感興趣的朋友們下面來一起看看吧。2017-01-01