In diesem Artikel werden Beispiele veranschaulicht, wie JS den Hintergrundeffekt des Universums und des Sternenhimmels realisiert. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html public "-// w3c // h2d xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transsitional.h2d">>
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<titels> Kosmischer Sternenhimmel -Hintergrund -Effekt, JS Special Effect </title>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.Stern {
Position: absolut;
Layer-Background-Color: Weiß;
Sichtbarkeit: sichtbar;
Top: -50px;
Breite: 50px;
Höhe: 50px;
Schriftgröße: 1PX;
Hintergrundfarbe: weiß;
}
.60pt {Schriftgröße: 60pt; Farbe:#ff66cc;}
</style>
<Script Language = "JavaScript">
<!-
var starnum = 75; // Anzahl der Sterne
var isns = (document.layers);
var _all = (ISNS)? '' : 'alle.';
var _style = (isns)? '' : '.Stil';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, sclx, scrly;
Funktion getStartPos (obj) {// Definieren Sie die Ausgangsposition der Sterne, die sich bewegt
obj.deltay = math.floor (math.random () * 12); // entscheide dich mit einer zufälligen Funktion
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);
} anders {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollLeft;
}
}
Funktion Movestar (Starn) // die Position der beweglichen Sterne
{
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+sclx) || (starn.top+tmpy> = w_y+scrly) || (starn.left-tmpx <= sclx) || (starn.top-tmpy <= sclx) || (starn.top-tmpy <= scrly) {= Scrly) {{{{{{{{{scrlx) (starn.top.top-tmpy <= scrly) {=
GetStartpos (Starn);
} anders {
eval ('starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+')');
}
} anders {
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 <= scrlx)||(starN.pixelTop-tmpy <= scrly)) {
GetStartpos (Starn);
} anders {
eval ('starn.pixeltop'+starn.ydir+'= tmpy');
eval ('starn.pixellEft'+starn.xdir+'= tmpx');
}
}
starn.counter ++;
}
Funktion animate () // Lassen Sie alle Sterne bewegen
{
für (i = 1; i <= starnum; i ++) {
bewegestar (eval ('stern'+i));
}
setTimeout ('Animate ()', 100);
}
Funktion findWindowparams () {// Definieren Sie die Startposition der Sterne, die sich bewegt
W_X = (ISNS)? window.innnerwidth: document.body.clientwidth;
W_Y = (ISNS)? window.innerHeight: document.body.clientHeight;
xoffset = w_x / 2;
yoffset = w_y / 2;
für (i = 1; i <= starnum; i ++) {
getStartpos (eval ('stern'+i));
}
}
Funktion resizens () {
setTimeout ('document.location.reload ()', 400);
}
(ISNS)? window.onResize = ssizens: window.onResize = findWindowparams;
window.onload = new Function ("findWindowparams (); animate ();");
->
</script>
</Head>
<body>
<Body Bgcolor =#999999>
<Script Language = "JavaScript">
<!-
für (i = 1; i <= starnum; i ++) {// Schichten für Sterne definieren
document.WriteLn ('<div id = "star'+i+'"> </div>');
eval ('var star'+i+'= document.'+_ all+'star'+i+_style);
}
->
</script>
<p> <center>
<font class = 60pt> <br> Fliegen im Sternenhimmel des Universums <br> </font>
</center> <p>
</body>
</html>
Der Betriebseffekt ist in der folgenden Abbildung dargestellt:
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.