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