Este artigo ilustra como o JS percebe o efeito de fundo do universo e do céu estrelado. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<! Doctype html public "-// w3c // h2d xhtml 1.0 transitional // pt" "http://www.w3.org/tr/xhtml1/h2d/xhtml-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Efeito cósmico de fundo do céu estrelado, efeito especial js </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.estrela {
Posição: Absoluto;
cor de background de camada: branco;
visibilidade: visível;
topo: -50px;
Largura: 50px;
Altura: 50px;
tamanho de fonte: 1px;
cor de fundo: branco;
}
.60pt {font-size: 60pt; cor:#ff66cc;}
</style>
<Script Language = "JavaScript">
<!-
var starnum = 75; // Número de estrelas
var isns = (document.layers);
var _All = (ISNS)? '' : 'todos.';
var _style = (isns)? '' : '.estilo';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
função getStartPos (obj) {// define a posição inicial das estrelas em movimento
obj.deltay = math.floor (math.random () * 12); // Decida com uma função aleatória
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);
} outro {
obj.width = 1;
obj.Height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
função movestar (starn) // a posição das estrelas em movimento
{
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 <= scrlx) || (starn.top-tmpy <=)
getstartpos (Starn);
} outro {
Eval ('Starn.moveby ('+Starn.xdir+tmpx+','+Starn.ydir+tmpy+')');
}
} outro {
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.pixelt-tmpy <= scrLX) ||
getstartpos (Starn);
} outro {
Eval ('Starn.pixeltop'+Starn.ydir+'= tmpy');
Eval ('starn.pixelleft'+starn.xdir+'= tmpx');
}
}
Starn.Counter ++;
}
function Animate () // Deixe todas as estrelas se mover
{
para (i = 1; i <= starnum; i ++) {
MoveStar (EVALL ('STAR'+I));
}
setTimeout ('Animate ()', 100);
}
função findWindowParams () {// Defina a posição inicial das estrelas em movimento
W_X = (ISNS)? Window.innerWidth: document.body.clientWidth;
W_Y = (ISNS)? Window.innerHeight: document.body.clientHeight;
Xoffset = w_x / 2;
yoffset = w_y / 2;
para (i = 1; i <= starnum; i ++) {
getStartPos (EVALL ('STAR'+I));
}
}
function resrizens () {
setTimeout ('document.location.reload ()', 400);
}
(ISNS)? window.OnResize = REDRIZENS: Window.onResize = findWindowParams;
window.onload = new function ("findWindowParams (); Animate ();");
->
</script>
</head>
<Body>
<corpo bgcolor =#999999>
<Script Language = "JavaScript">
<!-
for (i = 1; i <= starnum; i ++) {// define camadas para estrelas
document.writeln ('<div id = "star'+i+'"> </div>');
Eval ('var star'+i+'= document.'+_ all+'star'+i+_style);
}
->
</script>
<P> <Center>
<Font Class = 60pt> <br> Voando no céu estrelado do universo <br> </font>
</central> <p>
</body>
</html>
O efeito de operação é mostrado na figura abaixo:
Espero que este artigo seja útil para a programação JavaScript de todos.