文字列clipの応用 1

CSS STYLE

全く同一、同位置の２つの文字列(KODAYAN)を配置する。それぞれ上半分、下半分をclipし1秒間隔で背景色と文字色を切り替える。

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

<script language="JavaScript"><!--
var flg = 1;    //動作を切り替えるためのフラグ変数
var timerID;
function ClipGo(){
 if(flg == 1){
        dv1.style.backgroundColor = "yellow";
        dv1.style.color = "black";
        dv2.style.backgroundColor = "black";
        dv2.style.color = "yellow";
 }else{
        dv1.style.backgroundColor = "black";
        dv1.style.color = "yellow";
        dv2.style.backgroundColor = "yellow";
        dv2.style.color = "black";
 }
 flg = -flg;    //符号を反転する
 timerID = setTimeout("ClipGo()",1000);
}

function GoStop(){      //[停止/再開]ボタン
 if(bt.innerText == "停止"){
        clearTimeout(timerID);
        bt.innerText = "再開";
 }else{
        ClipGo();
        bt.innerText = "停止";
 }
}
//--></script>
</head>
<body onload="ClipGo();">

<p class="sample"><button id="bt" onclick="GoStop();">停止</button> </p>
<div id="dv1" style="position:absolute;top:140;left:320;width:400px;
　　　font:bold 60px 'Arial Black';clip:rect(0 370 50 0)">
CSS STYLE
</div>
<div id="dv2" style="position:absolute;top:140;left:320;width:400px;
　　　font:bold 60px 'Arial Black';clip:rect(50 370 100 0)">
CSS STYLE
</div>