| ポイント |
<![CDATA[
y -= 2;
document.layers["lay"].top = y;
if (y > 0) setTimeout('rollText()',100);
<div id="lay" style="position:absolute;top:200px;">
]]>
|
| 説 明 |
ページ上に文字を表示しスクロールさせるには、あらかじめdivタグで表示する文字列を囲んでおきます。この時にスタイルシートで座標を指定します。文字はウィンドウの下から表示するためウィンドウの高さはwindow.innerHeightで取得できます。「document.layers["lay"].top」でY座標の位置を指定できます。表示する文字の座標を減算しsetTimeout()を使って定期的に処理することで移動処理を行います。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字をページ上にスクロール表示させる【NN】</title>
<script Language="JavaScript"><!--
function rollText()
{
y -= 2;
document.layers["lay"].top = y;
if (y > 0) setTimeout('rollText()',100);
}
function init()
{
y = window.innerHeight;
setTimeout('rollText()',100);
}
// --></script>
</head>
<body onLoad="init()">
<div id="lay" style="position:absolute;top:200px;">
このサンプルはJavaScript例文辞典のものです。<br>
文字をスクロールさせるには、いろいろな方法があります。<br>
ページ上で自由に移動させるためにはスタイルシートと組み合わせて処理を行います。<br>
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字をページ上にスクロール表示させる【NN】