更新日 98/06/02

画面全体を横スクロールする

(応用:フレームを使ったテロップ)

Webページをちょっとかっこよくするための軽くて、お手軽な小技を研究するページです。

このページはリンクフリーです。どのページにでもリンクを張ってもらって結構です。


JavaScriptを使って、画面全体を横スクロールさせるページを作ってみましょう。
次のサンプルを <HEAD> と </HEAD> のに入れます。

----サンプル 開始----
<HEAD>

...

<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var direct = 1;
var max = 200;

function autoScroll()
{
  if (navigator.appVersion.substring(0, 3) > "3") {
    if (count <= max) {
      count = count + direct;
      scroll(count, 0);
      timer = setTimeout("autoScroll()",10);
    }
    else {
      scroll(0, 0);
    }
  }
}
// -->
</SCRIPT>

...

</HEAD>
----サンプル 終了----

次のサンプルを </HEAD>後のどこかに入れます。

----サンプル 開始----
<BODY onLoad="autoScroll()">
----サンプル 終了----

次に、横スクロールできるように、横幅の大きな画像をいれるか、<PRE>タグを使って、ページの幅を稼ぎます。
<HR WIDTH=300%> と指定して、横幅を画面の3倍取る方法もあります。

direct = 1; の値を変えるとスクロールのスムーズさが変えられます。
max = 200; の値を変えるとスクロールサイズが変えられます。
timer = setTimeout("autoScroll()",10); の値を変えるとスクロール速度が変えられます。

最後に、応用編として、フレームを使ったテロップ表示をしてみましょう
フレームを使ったテロップ表示



HOMEへ
なりてんのページへ 夫婦で楽しむRPGレビュー
もう1つのなりてんのページへ

なりてんへのメールその1 なりてんへのメールその2