踊る水平線

Sample Source......................................................................>>>
<style TYPE="text/css"><!--
   #HRx1 {position:absolute;left:30px;top:80px; width:50px;height:50px;color:black;}
   #HRx2 {position:absolute;left:300px;top:80px;width:50px;height:50px;color:red;}
   #HRy1 {position:absolute;left:500px;top:100px; width:50px;height:10px;color:black;z-index:2;}
   #HRy2 {position:absolute;left:500px;top:100px; width:50px;height:10px;color:red;z-index;1;}
--></style>
<script language="JavaScript"><!--
function HrX(){
        HRx1.style.left = 250;
        HRx1.style.width = 50;
        HRx2.style.width = 100;
        timerID = setTimeout("HrY()",1000);
}
function HrY(){
        HRx1.style.left = 200;
        HRx1.style.width = 100;
        HRx2.style.width = 50;
        timerID = setTimeout("HrX()",1000);
}

var top1 = 100; //水平線<HRy1>のtop位置
var lef2 = 500; //水平線<HRy2>のleft位置
var hei = 10;           //水平線<HRy1>のheight値
var wid = 50;           //水平線<HRy2>のwidth値
var n = 5;              //水平線<HRy1>のheight値の増減分
var m = 5;              //水平線<HRy2>のwidth値の増減分
function HrA(){
        HRy2.style.zIndex = 1;   //赤色水平線を下にする
        top1 -= n;
        HRy1.style.top = top1;
        hei = hei + 2 * n;
        HRy1.style.height = hei;
        if(top1<=50||top1>=100){n = -n;}        //増減値の符号を反転する
        timerA = setTimeout("HrA()",150);
        if(top1==100){
                clearTimeout(timerA);
                HrB();
        }
}
function HrB(){
        HRy2.style.zIndex = 3;
        lef2 -= m;
        HRy2.style.left = lef2;
        wid = wid + 2 * m;
        HRy2.style.width = wid;
        if(lef2<=450||lef2>=500){m = -m;}       //増減値の符号を反転する
        timerB = setTimeout("HrB()",150);
        if(lef2==500){
                clearTimeout(timerB);
                HrA();
        }
}
//--></script>
</head>
<body onload="HrX(); HrA();">

<hr id="HRx1">
<hr id="HRx2">

<hr id="HRy1">
<hr id="HRy2">