ウィンドウ上の位置をキープしての動き
スクロールしても、ウィンドウの大きさを変えても、常にウィンドウの中央をキープします。
トップ画面のナビゲーターバーの動く文字と同じようなプログラムです。
BODYタグ内に、4つの文字（スクリプト内で文字『●』を設定します）をセットします。
<div id="movePoint1" style="position:absolute;height:20pt;font-size:8pt;color:yellow">
</div>
<div id="movePoint2" style="position:absolute;height:20pt;font-size:8pt;color:red">
</div>
<div id="movePoint3" style="position:absolute;height:20pt;font-size:8pt;color:blue">
</div>
<div id="movePoint4" style="position:absolute;height:20pt;font-size:8pt;color:green">
</div>
同じく、プログラムをBODYタグ内に記述します。
<script type="text/JavaScript">
<!--
if (document.all){
//下で使う変数を宣言します。
var sy = 0;
var svy = 0;
var height = 0;
var rx=0;
var ry=0;
var dif1=0;
//それぞれのポイントに文字『●』を代入します。
document.all.movePoint1.innerHTML = '<tt>●</tt>';
document.all.movePoint2.innerHTML = '<tt>●</tt>';
document.all.movePoint3.innerHTML = '<tt>●</tt>';
document.all.movePoint4.innerHTML = '<tt>●</tt>';
//一定間隔の時間でflip関数を実行します。
window.setInterval('flip()',50);
}
function flip()
{
//動きの関数です。リサージュ曲線です。
cosVal=5;
sinVal=3;
dif1=dif1+0.05;
rx =30*Math.sin(sinVal*dif1);
ry=30*Math.cos(cosVal*dif1);
if (document.all){
//スクロール、ウィンドウスケールの変化に対応します。
//スクロールには緩衝的な動きをさせます。
height = document.body.clientHeight + sy;
svy = (document.body.scrollTop - sy) / 8;
sy = sy + svy;
//それぞれの点に関数を代入します。それぞれが90度ずつずれています。
document.all.movePoint1.style.pixelLeft =document.body.clientWidth/2+rx;
document.all.movePoint1.style.pixelTop =height-document.body.clientHeight/2-ry;
document.all.movePoint2.style.pixelLeft =document.body.clientWidth/2-rx;
document.all.movePoint2.style.pixelTop =height-document.body.clientHeight/2+ry;
document.all.movePoint3.style.pixelLeft =document.body.clientWidth/2+ry;
document.all.movePoint3.style.pixelTop =height-document.body.clientHeight/2+rx;
document.all.movePoint4.style.pixelLeft =document.body.clientWidth/2-ry;
document.all.movePoint4.style.pixelTop =height-document.body.clientHeight/2-rx;
}
}
//-->
</script>
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓
↓ここが底部分です。