<style type="text/css">
<!--
.Style1{
position: absolute;
font-size: 16pt;
font-weight: bold;
width: 400px;
visibility: hidden;
}
#iL1{color:#bbbbff}
#iL2{color:#8888ff}
#iL3{color:#4444ff}
#iL4{color:#0000ff}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;
var Laymax = 4; //レイヤーの最大数
var actT = 5; //移動時間：速＝小
var Srandom = true; //スタート地点の座標の決め方:true=random,flase=value
var Sposi = new Array(); //スタート地点の座標
Sposi[1] = 0; //iL1:X
Sposi[2] = 0; //iL1:Y
Sposi[3] = 0; //iL2:X
Sposi[4] = 0; //iL2:Y
Sposi[5] = 0; //iL3:X
Sposi[6] = 0; //iL3:Y
Sposi[7] = 0; //iL4:X
Sposi[8] = 0; //iL4:Y
var Fposi = new Array(); //最終到達座標：Laymax*2個分のx,y座標
Fposi[1] = 200; //iL1:X
Fposi[2] = 200; //iL1:Y
Fposi[3] = 210; //iL2:X
Fposi[4] = 210; //iL2:Y
Fposi[5] = 220; //iL3:X
Fposi[6] = 220; //iL3:Y
Fposi[7] = 230; //iL4:X
Fposi[8] = 230; //iL4:Y
var Fcount = new Array(); //移動完了までのカウント数
Fcount[1] = 100; //iL1
Fcount[2] = 100; //iL2
Fcount[3] = 100; //iL3
Fcount[4] = 100; //iL4
var Fflag = new Array();
var Ftflag = false;
var lay;
var leftX,topY;
var Count = 0;
function Init(){
var scrX,scrY,i;
for(i = 1; i <= Laymax; i++){
Fflag[i] = false;
}
if(iIE4){
scrX = document.body.clientWidth;
scrY = document.body.clientHeight;
}
if(iNN4){
scrX = innerWidth;
scrY = innerHeight;
}
for(i = 1; i <= Laymax; i++){
if(Srandom){
if(iIE4){
lay = document.all("iL"+i);
leftX = Math.round(Math.random()*scrX - lay.style.posWidth);
topY = Math.round(Math.random()*scrY - lay.style.posHeight);
}
if(iNN4){
lay = document.layers["iL"+i];
leftX = Math.round(Math.random()*scrX - lay.clip.width);
topY = Math.round(Math.random()*scrY - lay.clip.height);
}
if(leftX <= 0){
Sposi[i*2-1] = 1;
}else{
Sposi[i*2-1] = leftX;
}
if(topY <= 0){
Sposi[i*2]=1;
}else{
Sposi[i*2] = topY;
}
if(iIE4){
lay.style.visibility = "visible";
}
if(iNN4){
lay.visibility = "show";
}
}
}
multiLay();
}
function multiLay(){
var Xc,Yc;
var TimeID;
Count++;
if(!Ftflag){
Ftflag = true;
for(i = 1; i <= Laymax; i++){
if(Fflag[i] || Fcount[i] == 0){
Xc = Fposi[i*2-1];
Yc = Fposi[i*2];
}else{
Xc = Math.round(Sposi[i*2-1] + (Fposi[i*2-1] - Sposi[i*2-1])/Fcount[i] * Count);
Yc = Math.round(Sposi[i*2] + (Fposi[i*2] - Sposi[i*2])/Fcount[i] * Count);
}
if(iIE4){
lay = document.all("iL"+i);
lay.style.posLeft = Xc;
lay.style.posTop = Yc;
}
if(iNN4){
lay = document.layers["iL"+i];
lay.moveTo(Xc,Yc);
}
if(Count >= Fcount[i]){
Fflag[i] = true;
}else{
Ftflag = false;
}
}
}
if(Ftflag){
clearTimeout(TimeID);
}else{
TimerID = setTimeout("multiLay()",actT);
}
}
// -->
</script>
</head>
<body onload="Init()">
<DIV CLASS="Style1" ID="iL1">こんな風に揃うよ！</DIV>
<DIV CLASS="Style1" ID="iL2">こんな風に揃うよ！</DIV>
<DIV CLASS="Style1" ID="iL3">こんな風に揃うよ！</DIV>
<DIV CLASS="Style1" ID="iL4">こんな風に揃うよ！</DIV>