Este artículo ejemplos ilustran cómo JS se da cuenta del efecto de fondo del universo y el cielo estrellado. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<! Doctype html public "-// w3c // h2d xhtml 1.0 Transitional // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transicional.h2d ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> Cosmic Starry Sky Effect, JS Special Effect </title>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
.estrella {
Posición: Absoluto;
Capa de capa de capa: blanco;
Visibilidad: visible;
arriba: -50px;
Ancho: 50px;
Altura: 50px;
tamaño de fuente: 1px;
Color de fondo: blanco;
}
.60pt {Font-Size: 60Pt; Color:#FF66CC;}
</style>
<Script language = "javaScript">
<!-
var starnum = 75; // Número de estrellas
var isns = (document.layers);
var _All = (isns)? '' : 'todo.';
var _style = (isns)? '' : '.estilo';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
función getStartPos (obj) {// Defina la posición inicial de las estrellas que se mueven
obj.deltay = math.floor (math.random () * 12); // decidir con una función aleatoria
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);
} demás {
obj.width = 1;
obj.Height = 1;
obj.pixelTop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
Función Movestar (Starn) // La posición de las estrellas en movimiento
{
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 <= scrly)) {
getStartPos (Starn);
} demás {
eval ('starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+')');
}
} demás {
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) |
getStartPos (Starn);
} demás {
eval ('starn.pixeltop'+starn.ydir+'= tmpy');
eval ('starn.pixelleft'+starn.xdir+'= tmpx');
}
}
starn.counter ++;
}
función animate () // deja que todas las estrellas se muevan
{
para (i = 1; i <= starnum; i ++) {
Movestar (eval ('estrella'+i));
}
setTimeOut ('animate ()', 100);
}
función findwindowparams () {// Defina la posición inicial de las estrellas que se mueven
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 (eval ('estrella'+i));
}
}
función resizens () {
setTimeOut ('document.location.reload ()', 400);
}
(es)? window.onresize = resizens: window.onresize = findWindowParams;
Window.Onload = nueva función ("findwindowparams (); animate ();");
->
</script>
</ablo>
<Body>
<Body bgcolor =#999999>
<Script language = "javaScript">
<!-
para (i = 1; i <= starnum; i ++) {// Definir capas para estrellas
document.writeLn ('<div id = "Star'+i+'"> </div>');
eval ('var star'+i+'= document.'+_ all+'star'+i+_style);
}
->
</script>
<p> <center>
<font class = 60pt> <br> Volando en el cielo estrellado del universo <br> </font>
</Center> <p>
</body>
</html>
El efecto de operación se muestra en la figura a continuación:
Espero que este artículo sea útil para la programación de JavaScript de todos.