故郷の星空
星空をクリックすれば、移動方向を逆にできます。
星空をクリックすれば、移動方向を逆にできます。
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
.star {position:absolute;color:yellow;font-size:8pt}
--></style>
<script language="JavaScript"><!--
var skyW; //空の幅
var skyH; //空の高さ
var sn = 100; //星の数
function Init(){ //初期化
skyW = document.body.clientWidth-150;
sky.style.width = skyW;
skyH = sky.style.pixelHeight;
for(var i = 0 ; i < sn ; i++){
el = "st" + i; //ﾀｸﾞID名を取得
document.all[el].style.fontSize
= Math.floor(Math.random()*12)+3;
document.all[el].style.pixelTop
=
Math.floor(Math.random()*skyH);
document.all[el].style.pixelLeft
=
Math.floor(Math.random()*skyW);
}
StarChange();
}
var dx = 2; //横の移動量
var dy = 1; //縦の移動量
var timerID;
function StarChange(){
for(var i = 0 ; i < sn ; i++) {
el = "st" + i;
document.all[el].style.pixelTop += dy;
if(document.all[el].style.pixelTop>skyH-10)
document.all[el].style.pixelTop=0;
document.all[el].style.pixelLeft += dx;
if(document.all[el].style.pixelLeft>skyW-10)
document.all[el].style.pixelLeft=0;
else if(document.all[el].style.pixelLeft<2)
document.all[el].style.pixelLeft=skyW-10;
}
timerID = setTimeout("StarChange()",500);
}
//--></script>
</head>
<body onload="Init()">
<div id="sky" style="position:absolute;
height:300;background-color:black;"
onclick="dx = -dx;">
<script language="JavaScript"><!--
var txt = "";
for(var i=0 ; i<sn ; i++){
txt += "<span id='st"+i+"' class='star'>★</span>";
}
document.write(txt);
//--></script>
</div>
end(最終更新:12/11/10)