更新日 98/06/03

文字をフレームごと横スクロールする


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

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


フレーム機能と、JavaScriptを使って、文字をフレームごと横スクロールするページを作ってみましょう。
フレームドキュメントと、横スクロールするチャイルドフレームのサンプルを示します。

----フレームドキュメント サンプル 開始----
<HTML>
<HEAD>
<BODY>

<FRAMESET ROWS="*,100" FRAMESPACING="0" BORDER="0" FRAMEBORDER="0">
<FRAME SRC="lab3-2.html" NAME="top" SCROLLING="AUTO" FRAMEBORDER="0" NORESIZE>
<FRAME SRC="lab3-1.html" NAME="bottom" SCROLLING="AUTO" FRAMEBORDER="0">
</FRAMESET>>

</BODY>
</HEAD>
</HTML>
----フレームドキュメント サンプル 終了----


----チャイルドフレーム サンプル 開始----
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var count = 0;
var direct = 1;
var max;
if (navigator.appVersion.substring(0, 3) > "4") {
  max = innerWidth / 2;
}
else {
  max = 400;
}
function autoScroll()
{
  if (navigator.appVersion.substring(0, 3) > "3") {
    if (count >= max) {
      direct = -1;
    }
    else if (count <= 0) {
      direct = 1;
    }
    count = count + direct;
    scroll(count, 0);
    timer = setTimeout("autoScroll()",10);
  }
}
// -->
</SCRIPT>
</HEAD>

<BODY onLoad="autoScroll()">
<HR WIDTH=200%>
<H1 ALIGN = "RIGHT">画面を横スクロール</H1>
<HR WIDTH=200%>

</BODY>
</HEAD>
</HTML>
----チャイルドフレーム サンプル 終了----




HOMEへ
夫婦で楽しむRPGお勧め度チェック あ〜んど 座談会
もう1つのなりてんのページへ

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