この記事の例は、JSが宇宙と星空の背景効果をどのように実現しているかを示しています。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
コードコピーは次のとおりです。
<！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">
<head>
<title>宇宙の星空の背景効果、JS特殊効果</title>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<style type = "text/css">
。星 {
位置：絶対;
レイヤーバックグラウンドカラー：白。
可視性：表示されます。
上：-50px;
幅：50px;
高さ：50px;
フォントサイズ：1px;
背景色：白。
}
.60pt {font-size：60pt; color：＃ff66cc;}
</style>
<スクリプト言語= "javascript">
<！ -
var starnum = 75; //星の数
var isns =（document.layers）;
var _all =（isns）？ '' ： '全て。';
var _style =（isns）？ ''： '.Style';
var xoffset、yoffset、w_x、w_y、tmpx、tmpy、scrlx、scrly;
関数GetStartPos（OBJ）{//移動する星の開始位置を定義します
obj.deltay = math.floor（math.random（） * 12）; //ランダム関数で決定します
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）;
} それ以外 {
obj.width = 1;
obj.height = 1;
obj.pixeltop = yoffset+document.body.scrolltop;
obj.pixelleft = xoffset+document.body.scrollleft;
}
}
関数Movestar（星）//移動星の位置
{
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）;
} それ以外 {
eval（ 'starn.moveby（'+starn.xdir+tmpx+'、'+starn.ydir+tmpy+'）'）;
}
} それ以外 {
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）|
GetStartPos（Starn）;
} それ以外 {
eval（ 'starn.pixeltop'+starn.ydir+'= tmpy'）;
eval（ 'starn.pixelleft'+starn.xdir+'= tmpx'）;
}
}
starn.counter ++;
}
function animate（）//すべての星を動かします
{
for（i = 1; i <= starnum; i ++）{
movestar（eval（ 'star'+i））;
}
setimeout（ 'animate（）'、100）;
}
関数FindWindowParams（）{//移動する星の開始位置を定義します
w_x =（isns）？ window.innerwidth：document.body.clientwidth;
w_y =（isns）？ window.innerheight：document.body.clientheight;
xoffset = w_x / 2;
yoffset = w_y / 2;
for（i = 1; i <= starnum; i ++）{
getStartPos（eval（ 'star'+i））;
}
}
function resizens（）{
setimeout（ 'document.location.reload（）'、400）;
}
（ISNS）？ window.onresize = resizens：window.onresize = findwindowparams;
window.onload = new function（ "indwindowparams（）; animate（）;"）;
- >
</script>
</head>
<body>
<body bgcolor =＃99999>
<スクリプト言語= "javascript">
<！ -
for（i = 1; i <= starnum; i ++）{//星のレイヤーを定義する
document.writeln（ '<div id = "star'+i+'"> </div>'）;
eval（ 'var star'+i+'= document。'+_ all+'star'+i+_style）;
}
- >
</script>
<p> <center>
<font class = 60pt> <br>宇宙の星空の空を飛行<br> </font>
</center> <p>
</body>
</html>
操作効果は、次の図に示されています。
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。