快捷導(dǎo)航

js實現(xiàn)宇宙星空背景效果的方法

更新時間：2015年03月03日 10:22:12 作者：代碼家園

這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了js實現(xiàn)宇宙星空背景效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<TITLE>宇宙星空背景效果，Js特效</TITLE>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css"> 

.star {

position:absolute;

layer-background-color:white;

visibility:visible;

top:-50px;

width:50px;

height:50px;

font-size:1px;

background-color:white;

}

.60pt{font-size:60pt;color:#ff66cc;}

</style>

<SCRIPT LANGUAGE="JavaScript"> 

<!--

var starnum = 75; // 星星的數(shù)目

var isNS = (document.layers);

var _all = (isNS)? '' : 'all.';

var _style = (isNS) ? '' : '.style';

var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;

function getstartpos(obj) {  //定義星星移動的起始位置

obj.deltay = Math.floor(Math.random() * 12);    //用隨機函數(shù)決定

obj.deltax = Math.floor(Math.random() * 12);

obj.xdir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

obj.ydir = (Math.floor(Math.random() * 2) == 1) ? '+' : '-';

obj.counter = 1;

if (isNS) {

obj.clip.width = 1;

obj.clip.height = 1;

obj.moveTo(xoffset+pageXOffset, yoffset+pageYOffset);

} else {

obj.width = 1;

obj.height = 1; 

obj.pixelTop = yoffset+document.body.scrollTop;

obj.pixelLeft = xoffset+document.body.scrollLeft;

   }

}

function movestar(starN)   //移動星星的位置

{

tmpx = starN.deltax*starN.counter+starN.counter;

tmpy = starN.deltay*starN.counter+starN.counter;

if (isNS) {

starN.clip.width = starN.counter / 3;

starN.clip.height = starN.counter / 3;

scrlx = pageXOffset;

scrly = pageYOffset;

if ((starN.left+tmpx >= w_x+scrlx) || (starN.top+tmpy >= w_y+scrly) || (starN.left-tmpx <= scrlx) || (starN.top-tmpy <= scrly)) {

getstartpos(starN);

} else {

eval('starN.moveBy('+starN.xdir+tmpx+', '+starN.ydir+tmpy+')');

   }

} else {

starN.width = starN.counter/3;

starN.height = starN.counter/3;

scrlx = document.body.scrollLeft;

scrly = document.body.scrollTop;

if ((starN.pixelLeft+tmpx >= w_x+scrlx)||(starN.pixelTop+tmpy >= w_y+scrly) || (starN.pixelLeft-tmpx <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {

getstartpos(starN);

} else {

eval('starN.pixelTop'+starN.ydir+'=tmpy');

eval('starN.pixelLeft'+starN.xdir+'=tmpx');

   }

}

starN.counter++;

}

function animate() //讓所有的星星動起來

{

for(i=1; i <= starnum; i++) {

movestar(eval('star'+i));

}

setTimeout('animate()', 100);

}

function findwindowparams() {  //定義星星移動的起始位置

w_x = (isNS) ? window.innerWidth : document.body.clientWidth;

w_y = (isNS) ? window.innerHeight : document.body.clientHeight;

xoffset = w_x / 2;

yoffset = w_y / 2;

for (i = 1; i <= starnum; i++) {

getstartpos(eval('star'+i));

   }

}

function resizeNS() {

setTimeout('document.location.reload()', 400);

}

(isNS) ? window.onresize = resizeNS : window.onresize = findwindowparams;

window.onload = new Function("findwindowparams(); animate();");

-->

</script>

</HEAD>

<BODY>

<body  bgcolor=#999999>

<SCRIPT LANGUAGE="JavaScript"> 

<!--

for (i = 1; i <= starnum; i++) { //給星星定義層

document.writeln('<div id="star'+i+'" class="star"></div>');

eval('var star'+i+'=document.'+_all+'star'+i+_style);

}

-->

</script>

<p><center>

<font class=60pt><br>飛翔在<br>宇宙的星空中<br></font>

</center><p>

</body>

</html>