HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

周回する文字列

次のボタンで動きます--→　　

DHTML

DHTML

　

　

　

　

Sample Source......................................................................>>>

<script language="JavaScript"><!--
var bw,dw;
function Init(){    //文字列の位置を初期化
    bw = document.body.clientWidth;//ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの幅
    dw = dv1.style.pixelWidth;     //dv1の幅(dv2も同じ)
    //ｳｨﾝﾄﾞｳの中央に位置さす
    dv1.style.pixelLeft = (bw - dw)/2;
    dv1.style.pixelTop = 150;
    dv2.style.pixelLeft = (bw - dw)/2;
    dv2.style.pixelTop = 150;
}

function MoveText(){    //ﾎﾞﾀﾝを押した時
    if(bt.innerText == "MOVE"){
        Move1();
        bt.innerText = "STOP";
    }else{
        clearTimeout(timer1);
        clearTimeout(timer2);
        clearTimeout(timer3);
        clearTimeout(timer4);
        clearTimeout(timer5);
        bt.innerText = "MOVE";
        dv1.style.color = "";
        dv2.style.color = "";
        Init();     //文字列の位置を初期化
    }
}

var timer1,timer2,timer3,timer4,timer5;
function Move1(){             //左右に移動
    dv1.style.color = "red";
    dv2.style.color = "blue";
    if((dv1.style.pixelLeft + dw) < bw){
        dv1.style.pixelLeft += 3;
        dv2.style.pixelLeft -= 3;
        timer1 = setTimeout("Move1()",50);
    }else{
        clearTimeout(timer1);
        Move2();
    }
}
function Move2(){         //上方向に移動
    if(dv1.style.pixelTop > 0){
        dv1.style.pixelTop -= 2;
        dv2.style.pixelTop -= 2;
        timer2 = setTimeout("Move2()",50);
    }else{
        clearTimeout(timer2);
        Move3();
    }
}
function Move3(){         //中央に向かって移動
    if(dv1.style.pixelLeft > bw/2){
        dv1.style.pixelLeft -= 2;
        dv2.style.pixelLeft += 2;
        timer3 = setTimeout("Move3()",50);
    }else{
        clearTimeout(timer3);
        Move4();
    }
}
function Move4(){         //下方に移動
    if(dv1.style.pixelTop < 150){
        dv1.style.pixelTop += 2;
        dv2.style.pixelTop += 2;
        timer4 = setTimeout("Move4()",50);
    }else{
        clearTimeout(timer4);
        Move5();
    }
}
function Move5(){         //中央に移動し停止する
    if(dv1.style.pixelLeft > (bw - dw)/2){
        dv1.style.pixelLeft -= 2;
        dv2.style.pixelLeft += 2;
        timer5 = setTimeout("Move5()",50);
    }else{
        clearTimeout(timer5);
        dv1.style.color = "";
        dv2.style.color = "";
        bt.innerText = "MOVE";
    }
}
//--></script>
</head>

<body onload="Init();">
<button id="bt" onclick="MoveText();">MOVE</button>

<div id="dv1" style="position:absolute;width:180;
    border:thin solid;font:30pt 'Arial Black';
    text-align:center">DHTML</div>
<div id="dv2" style="position:absolute;width:180;
    border:thin solid;font:30pt 'Arial Black';
    text-align:center">DHTML</div>

end(最終更新:12/11/21)