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

飛び込むテキスト

　

アニメーションする文字列

Dynamic HTML

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

<script Language="JavaScript"><!--
function InOut(){         //ﾎﾞﾀﾝを押した時
    if(bt.innerText == "飛び込む"){
        MoveIn();
        bt.innerText = "逃げる";
    }else{
        MoveOut();
        bt.innerText = "飛び込む";
    }
}

var timerIn1,timerIn2,timerOUT;
function MoveIn(){    //左の文字列が飛び込む
    if(D1.style.posTop < 60){
        D1.style.posTop += 2;
        D1.style.posLeft += 7;
        timerIn1 = setTimeout("MoveIn();",1);
    }else{
        clearTimeout(timerIn1);
        MoveIn2();
    }
}
function MoveIn2(){    //右の文字列が飛び込む
    if(D2.style.posTop < 80){
        D2.style.posTop += 3;
        D2.style.posLeft -= 5;
        timerIn2 = setTimeout("MoveIn2();",1);
    }else{
        clearTimeout(timerIn2);
    }
}

function MoveOut(){    //文字列が逃げる
    if(D1.style.posTop >= -20){
        D1.style.posTop -= 2;
        D1.style.posLeft -= 7;
        D2.style.posTop -= 3;
        D2.style.posLeft += 5;
        setTimeout("MoveOut();",1);
    }else clearTimeout(timerOUT);
}
// --></script>
</head>

<body>
<button id="bt" onclick="InOut();">飛び込む</button>
<div id="D1" style="position:absolute;top:-20;
    left:-200;color:green;font:16pt ＤＦ勘亭流">
    アニメーションする文字列
</div>
<div id="D2" style="position:absolute;top:-50;
    left:350;color:red;font:16pt Verdana">
    Dynamic HTML
</div>

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