快捷導(dǎo)航

js實(shí)現(xiàn)飛入星星特效代碼

更新時(shí)間：2014年10月17日 15:11:13 投稿：shichen2014

這篇文章主要介紹了js實(shí)現(xiàn)飛入星星特效代碼,主要通過(guò)控制背景與飛入點(diǎn)的樣式,結(jié)合setTimeout函數(shù)即可實(shí)現(xiàn)星星飛入的效果,對(duì)于學(xué)習(xí)javascript有不錯(cuò)的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)飛入星星特效代碼，分享給大家供大家參考。

具體實(shí)現(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>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助

您可能感興趣的文章:

js
特效

相關(guān)文章

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