| ポイント |
<![CDATA[
divW = 480;
x = (pageW - divW) / 2;
document.all["lay"].style.left = x;
]]>
|
| 説 明 |
文字をページ内のセンターに配置するにはbodyタグのclientWidthプロパティの値から文字を表示してしているdivタグの横幅を減算します。その後を2で割った値を文字が表示されているdivタグのスタイルのleftプロパティに設定します。ページ上に文字を繰り返し表示しスクロールさせるには、あらかじめdivタグで表示する文字列を囲みます。この時にスタイルシートで座標と高さ（横にスクロールさせたい場合には横幅）を指定します。文字はウィンドウの下から表示するためウィンドウの高さを求める必要があり「document.body.clientHeight」で取得できます。「document.all("lay").style.y」で表示するY座標を指定します。表示する文字の座標を減算しsetTimeout()を使って定期的に処理することで移動処理を行います。文字が画面上までいき完全に消えたかどうかを調べ完全に消えたら再度Y座標をウィンドウ下部に設定します。これで文字を繰り返しスクロール表示させることができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字を中央に配置しページ上で繰り返しスクロール表示させる【IE】</title>
<script Language="JavaScript"><!--
function rollText()
{
pageW = document.body.clientWidth;
divW = 480; // スクロールするテキストの横幅
x = (pageW - divW) / 2;
y -= 2;
document.all["lay"].style.top = y;
document.all["lay"].style.left = x;
textH = parseInt(document.all("lay").style.height);
if (y < -textH)
{
y = document.body.clientHeight;
}
setTimeout('rollText()',100);
}
function init()
{
y = document.body.clientHeight;
setTimeout('rollText()',100);
}
// --></script>
</head>
<body onLoad="init()">
<div id="lay" style="position:absolute;top:2000px;width:480px;height:150px;background-color:yellow;">
このサンプルはJavaScript例文辞典のものです。<br>
文字をスクロールさせるには、いろいろな方法があります。<br>
ページ上で自由に移動させるためにはスタイルシートと組み合わせて処理を行います。<br>
このサンプルでは文字が上までいったら、再度ウィンドウ下部から表示します。
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字を中央に配置しページ上で繰り返しスクロール表示させる【IE】