..

JavaScriptの入門とサンプル集
JavaScript入門−画像・テキスト編(テキストを動かす)     ■戻る     ■次へ     ■Home

テキストを動かす

 テキストを動かす場合も画像と同様にスタイルシートを用いますが、テキストのスタイル要素を制御するにはDOM(Document Object Model)を使わなくてはなりません。DOMはHTMLやXMLで記述された各要素を取り扱うための標準インタフェースとして1998年にW3Cによっ て勧告されました。IE5・ネスケ6以降のブラウザでDOMをサポートしています。それ以前はのIEでは「document.all」、ネスケでは 「layer」というオブジェクトがDOMの代わりの機能をしていましたが、ネスケの「layer」についてはネスケ6で削除になりました。その過渡期に はブラウザのバージョンや両方のブラウザで動くように考慮してプログラムしていました。

スタイルシートでテキストの座標を設定する方法

   <div id="テキストの名前" style="position:absolute;left:X座標;top:Y座標;">
   テキスト
   </div>


■注意
     ・position:absolute;は座標系を絶対座標に設定しています。
     ・スタイルシートの場合の座標の表記はピクセル単位の場合「px」を付けます。
      座標が125ピクセルの場合「125px」と書きます。


その他のスタイルシートについてはリファレンスマニュアルを参照してください。

これらをJavaScriptで制御するには次のようになります。

JavaScriptでスタイルシートを制御する方法

    document.getElementById("テキストの名前").style.left=X座標
    document.getElementById("テキストの名前").style.top=Y座標



 それでは、これらを使ってテキストが動くプログラムを作ってみましょう。



<html>

<head>
<title>テキストを動かす</title>

<script language="JavaScript"><!--
x=0;
y=16;
v=2;

function moveTxt()
{
x+=v;
if((x>224)||(x<0))v=-v;

document.getElementById("txtName").style.left=x;
}
// --></script>


</head>

<body onLoad="setInterval('moveTxt()',25)">
<div id="txtName" style="position:absolute;left:0px;top:16px;">

テキスト
</div>
</body>
</html>

〜sample14.html〜のリスト





変数の初期設定



関数「moveTxr()」の設定
テキストが画面を左右に行ったり来たりする処理をします。
x座標にvを加算
テキストが画面の端まできたら反転させます。
右端を超えたらv=-2に、左端を超えたらv=2になります。
スタイルシートを操作してテキストの座標を変更します。
関数が自動的に呼び出されるようにタイマーをセットします。





HTMLが読み込まれたら関数「moveTxt()」を実行します。
スタイルシートを使ってテキストを最初の場所に描画します。

【参照】割り込み処理

   ■sample14.htmlを実行する


sample14.htmlの実行画面


..

JavaScript入門−画像・テキスト編(テキストを動かす)     ■戻る     ■次へ     ■Home


..