This article illustrates the method of JS to achieve the cosmic sky background effect. Share to everyone for your reference. The implementation methods are as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//h2d XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d ">
<TITLE> Cosmic Sky Background effect, JS special effects </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; Number of stars
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) {//define the starting position of the Star Movement
Obj.deltay = Math.floor (Math.random () * 12); Using random functions to determine
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)//move the star position
{
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 ()//Let all the stars move
{
For (I=1 i <= starnum; i++) {
MoveStar (eval (' star ' +i));
}
SetTimeout (' Animate () ', 100);
}
function Findwindowparams () {//define the starting position of the Star Movement
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++) {//define layer for stars
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> flying in the stars of <br> universe <br></font>
</center><p>
</body>
I hope this article will help you with your JavaScript programming.
