| ポイント |
<![CDATA[
clipW = parseInt(document.all("block1").style.width);
divW = parseInt(document.all("lay").style.width);
x = (clipW - divW) / 2;
y -= 2;
document.all["lay"].style.top = y;
document.all["lay"].style.left = x;
]]>
|
| 説 明 |
文字をページ内の一定範囲に繰り返し表示させるには、あらかじめ文字を表示するdivタグより前にdivタグで囲みます。つまり二重にdivタグで囲みます。最初のdivタグにスタイルシートのclipを使って表示範囲を設定します。clipを指定すると指定された範囲以外は表示されないので、この範囲で文字をスクロール処理させます。文字が画面上までいき完全に消えたかどうかを調べ完全に消えたら再度Y座標を再設定します。これで文字を繰り返しスクロール表示させることができます。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字をページ上の一定範囲で繰り返しスクロール表示させる【IE】</title>
<script Language="JavaScript"><!--
initY = 160; // 表示開始Y座標
function rollText()
{
clipW = parseInt(document.all("block1").style.width);
divW = parseInt(document.all("lay").style.width); // スクロールするテキストの横幅
x = (clipW - 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 = initY;
}
setTimeout('rollText()',100);
status = x;
}
function init()
{
y = initY;
setTimeout('rollText()',100);
}
// --></script>
</head>
<body onLoad="init()">
<div id="block1" style="position:absolute;top:0px;left:0px;width:800px;height:160px;background-color:black;clip:rect(0,800,160,0);">
<div id="lay" style="position:absolute;top:300px;left:0px;width:480px;height:150px;background-color:yellow;">
このサンプルはJavaScript例文辞典のものです。<br>
文字をスクロールさせるには、いろいろな方法があります。<br>
ページ上で自由に移動させるためにはスタイルシートと組み合わせて処理を行います。<br>
このサンプルでは文字が上までいったら、再度黒いブロックの下部から表示します。
</div>
</div>
</body>
</html>
]]>
|
| 補足説明 |
なし |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字をページ上の一定範囲で繰り返しスクロール表示させる【IE】