文字列clipの応用 2.

CSS STYLE

全く同一の2つの文字列を重ねる。上下半分づつクリップし、それぞれ左右に動かす。

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

<script language="JavaScript"><!--
var flg = 1;
var timerID;
function ClipGo(){
　if(flg == 1){
        dv1.style.left = 250;
        dv2.style.left = 250;
　}else if(flg == 2){
        dv1.style.left = 253;
        dv2.style.left = 247;
　}else if(flg == 3){
        dv1.style.left = 250;
        dv2.style.left = 250;
　}else{
        dv1.style.left = 247;
        dv2.style.left = 253;
　}
　flg ++;
　if(flg > 4)flg = 1;
　timerID = setTimeout("ClipGo()",1000);
}

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

<div id="dv1" style="position:absolute;top:140;left:350;color:navy;
　　　font:bold 68px 'Arial Black';width:450px;clip:rect(0 450 50 0)";>
　CSS STYLE
</div>
<div id="dv2" style="position:absolute;top:140;left:350;color:navy;
　　　font:bold 68px 'Arial Black';width:450px;clip:rect(50 450 100 0)";>
　CSS STYLE
</div>

<p class="sample"><button id="bt" onclick="GoStop();">＜停止＞</button></p>