ときどき流れ星が見えます。
お気に入りのプログラム♪
星は、文字の「★」か画像が使えます。
見本は色の変わるGIFアニメを使っているので、流れながら色が変わっています。
同じものを使いたい方は、以下から持っていって下さい。
報告はいらないけど、リンクしてもらえると嬉しいです。
1) </title>〜</head>に以下のタグを入れます。
【文字か画像か】は、文字の「★」を使うなら「0」、画像を使うなら「1」と入れます。
画像を使う場合は、その次の行の【画像】にそのファイル名を入れます。
文字を使う場合は【画像】はそのままか、空白でよいです。
その他の設定はそのままでいいと思いますが、変えたいものがあれば説明に従って変えて下さい。
<script type=text/javascript language=javascript>
<!--
var move = true; // 星をスクロールに合わせて移動するか？。する：true しない:false
var meteorRate = 90; // 流れ星の出やすさ。小さいほど良く出る。
var dl = 20; // 流れ星の動く早さ。(これが流れ星の間隔にもなる)
// 流れ星の大きさ数の設定
var size = 2; // １番小さい流れ星の大きさ。単位px
var sizeStep = 2; // 流れ星の大きくなる幅。単位px
var meteorNo = 5; // 流れ星の数。
// 上から順に 2 2 5 の場合、流れ星の大きさは小さい順に「2 4 6 8 10」になる。
// 3 3 6 なら「3 6 9 12 15 18」。sizeStepが0なら全て同じ大きさ。
// 流れ星の絵の設定
var useImg = 【文字か画像か】; // 流れ星の絵は文字or画像。 0:文字 1:画像
var meteorImg = "【画像】"; // 画像のパス useImg = 1;の場合に設定。
_dom=(document.all?3:(document.getElementById?1:(document.layers?2:0)));
function getWindowSize() {
if(_dom == 1 || _dom == 2) {
win_width = self.innerWidth;
win_height = self.innerHeight;
}
if (_dom == 3) {
win_width = document.body.clientWidth;
win_height = document.body.clientHeight;
}
}
function getScrollPosX() {
if (_dom == 1) return scrollX;
if (_dom == 2) return pageXOffset;
if (_dom == 3) return document.body.scrollLeft
}
function getScrollPosY() {
if (_dom == 1) return scrollY;
if (_dom == 2) return pageYOffset;
if (_dom == 3) return document.body.scrollTop;
}
function showLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "visible";
if (_dom == 2) document.layers[layerName].visibility = "show";
if (_dom == 3) document.all(layerName).style.visibility = "visible";
}
function hideLayer(layerName){
if (_dom == 1) document.getElementById(layerName).style.visibility = "hidden";
if (_dom == 2) document.layers[layerName].visibility = "hide";
if (_dom == 3) document.all(layerName).style.visibility = "hidden";
}
function moveLayerTo(layerName, x, y){
if (_dom == 1) {
document.getElementById(layerName).style.left = x;
document.getElementById(layerName).style.top = y;
}
if (_dom == 2) {
document.layers[layerName].left = x;
document.layers[layerName].top = y;
}
if (_dom == 3) {
document.all(layerName).style.pixelLeft = x;
document.all(layerName).style.pixelTop = y;
}
}
var sx = new Array(), sy = new Array(), sclW = 0, sclH = 0;
function initMeteor() {
if (_dom && meteorFlag == 0) {
var ran = Math.random()*meteorRate;
if (ran < 10) {
getWindowSize();
if (move) sclW = getScrollPosX(), sclH = getScrollPosY();
sX = Math.floor(Math.random()*(win_width-meteorMaxSize-5)) + sclW;
sY = Math.floor(Math.random()*(win_height-meteorMaxSize-5)) + sclH;
eX = Math.floor(Math.random()*(win_width-meteorMaxSize-5)) + sclW;
eY = Math.floor(Math.random()*(win_height-meteorMaxSize-5)) + sclH;
for (var m=0; m
moveLayerTo("meteor"+m, sX, sY);
sx[m] = sX; sy[m] = sY;
}
moveMeteor();
}
}
setTimeout("initMeteor()", 100);
}
var meteorFlag = 0;
function moveMeteor() {
var l, xp, yp, stopflag = false;
for (var m=0; m
if (meteorFlag >= m) {
l = Math.abs(Math.sqrt(Math.pow((eX - sx[m]),2) + Math.pow((eY - sy[m]),2)));
if (l > dl) {
xp = dl / l * (eX - sx[m]) + sx[m];
if (eX - sx[m] == 0) {
if (sy[m] < eY) yp = sy[m] + dl;
else yp = sy[m] - dl;
} else yp = (sy[m] - eY) / (sx[m] - eX) * xp + sy[m] - (sy[m] - eY) / (sx[m] - eX) * sx[m];
sx[m] = xp; sy[m] = yp;
showLayer("meteor"+m);
moveLayerTo("meteor"+m, sx[m], sy[m]);
} else {
hideLayer("meteor"+m);
if (m == meteorNo-1) stopflag = true;
}
}
}
if (!stopflag) { meteorFlag += 1; tim = setTimeout("moveMeteor()", 10); }
else { clearTimeout(tim); meteorFlag = 0; }
}
window.onload = initMeteor;
//-->
</script>
|
2) <body>〜</body>のどこかに以下のタグを入れます。
<script language=javascript1.2>
<!--
var starLay = '<SPAN id="dmy" style="position:absolute; visibility:hidden;"></SPAN>';
for (i=meteorNo-1; i>=0; i--) {
size += sizeStep; meteorMaxSize = size;
if (_dom == 1 || _dom == 3) {
if (useImg == 0) starLay += '<SPAN id="meteor' + i +
'" style="position:absolute; width:' + size + 'px; font-size:' + size +
'px; color:#FFFF00; z-index:10; visibility:hidden;">★</SPAN>';
if (useImg == 1) starLay += '<SPAN id="meteor' + i +
'" style="position:absolute; width:1px; z-index:10; visibility:hidden;"><IMG src="' +
meteorImg + '" width="' + size + '" height="' + size + '"></SPAN>';
}
if (_dom == 2) {
if (size == 1) size = 2;
if (useImg == 0) starLay += '<LAYER name="meteor'+ i +
'" z-index="10" visibility=\"hide\"><FONT color="#FFFF00" style="font-size:'
+ size + 'px;">★</FONT></LAYER>';
if (useImg == 1) starLay += '<LAYER name="meteor'+ i +
'" z-index="10" visibility=\"hide\"><IMG src="' + meteorImg + '" width="' + size +
'" height="' + size + '"></LAYER>';
}
}
document.writeln(starLay);
//-->
</script>
|
「HTMLタグ」のトップに戻る
|
|
|
