Ces exemples d'articles illustrent comment JS réalise l'effet de fond de l'univers et du ciel étoilé. Partagez-le pour votre référence. La méthode de mise en œuvre spécifique est la suivante:
La copie de code est la suivante:
<! 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">
<adal>
<Title> Cosmic Starry Sky Background Effect, JS Effet spécial </TITME>
<meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8" />
<style type = "text / css">
.étoile {
Position: absolue;
Couche-fond-sol: blanc;
Visibilité: visible;
en haut: -50px;
Largeur: 50px;
hauteur: 50px;
taille de police: 1px;
Color d'arrière-plan: blanc;
}
.60pt {taille de police: 60pt; couleur: # ff66cc;}
</ style>
<Script linguisse = "javascript">
<! -
var starnum = 75; // Nombre d'étoiles
var isns = (document.layers);
var _all = (isns)? '' : 'tous.';
var _style = (ISNS)? '' : '.style';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
fonction getStartpos (obj) {// définir la position de départ des étoiles en mouvement
obj.deltay = math.floor (math.random () * 12); // décide avec une fonction aléatoire
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);
} autre {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset + document.body.scrolltop;
obj.pixelleft = xoffset + document.body.scrollleft;
}
}
fonction mevestar (starn) // la position des étoiles en mouvement
{
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 + scly) || (starn.left-tmpx <= scrlx) || (starn.top-tmpy <= scrlx) || (starn.top-tmpy <= scry)) {
GetStartpos (Starn);
} autre {
eval ('starn.moveby (' + starn.xdir + tmpx + ',' + starn.ydir + tmpy + ')');
}
} autre {
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 + scly) || (starn.pixelleft-tmpx <= scrlx) || (starn.pixeltop-tmpy <= scrlx) || (starn.pixeltop
GetStartpos (Starn);
} autre {
eval ('starn.pixeltop' + starn.ydir + '= tmpy');
eval ('starn.pixelleft' + starn.xdir + '= tmpx');
}
}
starn.counter ++;
}
fonction animate () // laissez toutes les étoiles bouger
{
pour (i = 1; i <= starnum; i ++) {
MOVESTAR (EVAL ('Star' + I));
}
setTimeout ('animate ()', 100);
}
fonction findwindowParams () {// définir la position de départ des étoiles se déplaçant
w_x = (isns)? window.innerwidth: document.body.clientwidth;
w_y = (isns)? window.innerheight: document.body.clientHeight;
xoffset = w_x / 2;
yoffset = w_y / 2;
pour (i = 1; i <= starnum; i ++) {
getStartPos (eval ('star' + i));
}
}
fonction resizens () {
setTimeout ('document.location.reload ()', 400);
}
(ISNS)? window.onresize = resizens: window.onresize = findWindowParams;
window.onload = new function ("findWindowParams (); animate ();");
->
</cript>
</ Head>
<body>
<corps bgcolor = # 999999>
<Script linguisse = "javascript">
<! -
pour (i = 1; i <= starnum; i ++) {// définir les couches pour les étoiles
document.writeln ('<div id = "star' + i + '"> </div>');
eval ('var star' + i + '= document.' + _ all + 'star' + i + _style);
}
->
</cript>
<p> <centre>
<font class = 60pt> <br> Volant dans le ciel étoilé de l'univers <br> </font>
</ centre> <p>
</docy>
</html>
L'effet de fonctionnement est illustré dans la figure ci-dessous:
J'espère que cet article sera utile à la programmation JavaScript de tous.