Contoh artikel ini menggambarkan bagaimana JS mewujudkan efek latar belakang alam semesta dan langit berbintang. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html public "-// w3c // h2d xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/h2d/xhtml1-transitional.h2d">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title> Efek Latar Belakang Langit Cosmic Starry, Efek Khusus JS </iteme>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<type style = "text/css">
.star {
Posisi: Absolute;
Lapisan-Background-Color: Putih;
Visibilitas: terlihat;
Atas: -50px;
Lebar: 50px;
Tinggi: 50px;
Ukuran font: 1px;
Latar Belakang: Putih;
}
.60pt {font-size: 60pt; color:#ff66cc;}
</tyle>
<Bahasa skrip = "javascript">
<!-
var starnum = 75; // Jumlah bintang
var isns = (document.layers);
var _all = (ISNS)? '' : 'semua.';
var _style = (ISNS)? '' : '.gaya';
var xoffset, yoffset, w_x, w_y, tmpx, tmpy, scrlx, scrly;
fungsi getStartpos (obj) {// Tentukan posisi awal bintang yang bergerak
obj.deltay = math.floor (math.random () * 12); // putuskan dengan fungsi acak
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);
} kalau tidak {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
Function Movestar (Starn) // Posisi bintang yang bergerak
{
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) ||
getStartpos (Starn);
} kalau tidak {
eval ('starn.moveby ('+starn.xdir+tmpx+','+starn.ydir+tmpy+')');
}
} kalau tidak {
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);
} kalau tidak {
eval ('starn.pixeltop'+starn.ydir+'= tmpy');
eval ('starn.pixelleft'+starn.xdir+'= tmpx');
}
}
Starn.Counter ++;
}
fungsi animate () // biarkan semua bintang bergerak
{
untuk (i = 1; i <= starnum; i ++) {
movestar (eval ('star'+i));
}
setTimeout ('animate ()', 100);
}
Fungsi FindWindowParams () {// Tentukan posisi awal dari Stars Moving
w_x = (ISNS)? window.innerwidth: document.body.clientwidth;
w_y = (ISNS)? window.innerheight: document.body.clientHeight;
xoffset = w_x / 2;
yoffset = w_y / 2;
untuk (i = 1; i <= starnum; i ++) {
getStartpos (eval ('star'+i));
}
}
function resizens () {
setTimeout ('document.location.reload ()', 400);
}
(ISNS)? window.onResize = Pusar: window.onresize = findWindowParams;
window.onload = fungsi baru ("findWindowParams (); animate ();");
->
</script>
</head>
<body>
<body bgcolor =#999999>
<Bahasa skrip = "javascript">
<!-
untuk (i = 1; i <= starnum; i ++) {// Tentukan lapisan untuk bintang
document.writeln ('<div id = "star'+i+'"> </div>');
eval ('var star'+i+'= dokumen.'+_ all+'star'+i+_style);
}
->
</script>
<p> <senter>
<font class = 60pt> <br> Terbang di langit berbintang dari alam semesta <br> </font>
</penter> <p>
</body>
</html>
Efek operasi ditunjukkan pada gambar di bawah ini:
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.