当前位置：首页 > 资讯 > 技术文档

js实现宇宙星空背景效果的方法

时间：2022-09-16 10:54 编辑：来源：阅读：
扫一扫，手机访问

摘要：js实现宇宙星空背景效果的方法

本文实例讲述了js实现宇宙星空背景效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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; // 星星的数目

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);    //用随机函数决定

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>

运行效果如下图所示： [img]http://files.jb51.net/file_images/article/201503/201533103138039.jpg?201523103149[/img] 希望本文所述对大家的javascript程序设计有所帮助。

全部评论(0)

上一篇：bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
下一篇：浅谈jQuery中setInterval()方法

资讯排行榜
更多>>