Java Scriptの参考書
全体をフレームで構成して、ウインドウ内部にインラインフレーム的に枠を作ります（これは必須ではない）。 そのフレームを横方向にスクロールさせ、ページ切替をビジュアルに行います。 如何にも「紙芝居」のようなので（？）・・・
スクロールスピードはサンプルが最も速い状態で、遅くすることは可能です。 また、スクロールの仕方（演出方法）は、スクリプトを変更することで可能となりますが、自身ある方だけやって下さい。
フレームのメインとなるHTMLファイルには、各フレームに各HTMLファイルを割り当てます。 この中で、中心に位置するHTMLファイルにスクリプトを記述し、それがスクロール可能となります。 周りの４枚のHTMLファイルはお好きに彩り下さい。ここではダミーとして扱い、特に何も記述しておりません。 HTMLファイルの構成は以下のようになっています。
スクリプトを記述したファイル単体でも動作可能です。従って、特に断りがなければ以下このファイルについての説明をします。
各ページはテーブルで構成しています。 テーブルでwidth属性を指定するのではなく、1*1ピクセルのダミー画像をうまく配置して、テーブルの各セルの幅、高さをコントロールしています。 この方法については、皆さんの方が詳しいでしょうから解説しません。 わからない方はHTMLソースをご覧下さい。
例えばセルの幅が600ピクセルとすると、ページスクロール分は600ピクセルを指定します。 ２ページ分だと1200ピクセルとなります。 指定する部分はアンカーのonclick属性に指定する関数の引数に指定します。 詳細は下記説明をご覧下さい。 また、右にスクロールする場合、左にスクロールする場合で指定する関数名が異なりますので、ご注意下さい。
この時、テーブルにおけるcellpadding属性やcellspacing属性に0を指定しておくと良いでしょう。
IE4,IE5,NN4,N6
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>紙芝居</title> </head> <frameset cols="1*,600,1*" border="0" framespacing="0" frameborder="0"> <frame src="sp58_left.html" scrolling="no" noresize marginwidth="0" marginheight="0" name="left"> <frameset rows="1*,400,1*" border="0" framespacing="0" frameborder="0" cols="*"> <frame src="sp58_top.html" scrolling="no" noresize marginwidth="0" marginheight="0" name="top"> <frame src="sp58_main.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no" name="main"> <frame src="sp58_bottom.html" marginwidth="0" marginheight="0" scrolling="no" noresize name="bottom"> </frameset> <frame src="sp58_right.html" scrolling="no" marginwidth="0" noresize name="right"> </frameset> <noframes> <body> </body> </noframes> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>紙芝居</title>
<style type="text/css">
<!--
a{
text-decoration: none;
font-weight: bold;
color: #009;
}
div.contents{
font: bold 36pt cursive;
color: #c00;
}
-->
</style>
<script language="JavaScript">
<!--
var actT = 1; //スクロールスピード：小＝速い
var TimeID;
var scrx,dx,x,inix,viewx;
function Init(){
dx = 0;
x = 0;
inix = 0;
viewx = inix;
}
function right(rq){
scrx = rq;
inix = viewx;
dx = 0;
x = 0;
scroll_right();
}
function left(rq){
scrx = rq;
inix = viewx;
dx = 0;
x = 0;
scroll_left();
}
function scroll_right(){
var tgtx = inix + scrx;
if( x < (scrx/2) ){
dx++;
}else if( x > (scrx/2) ){
dx--;
dx = Math.max(dx , 1);
}
x += dx;
viewx = inix + x;
viewx = Math.min( viewx , tgtx );
self.scroll(viewx,0);
if(viewx >= tgtx){
clearTimeout(TimeID);
}else{
TimeID = setTimeout( "scroll_right()" , actT);
}
}
function scroll_left(){
var tgtx = inix - scrx;
if( x < (scrx/2) ){
dx++;
}else if( x > (scrx/2) ){
dx--;
dx = Math.max(dx , 1);
}
x += dx;
viewx = inix - x;
viewx = Math.max( viewx , tgtx );
self.scroll(viewx,0);
if(viewx <= tgtx){
clearTimeout(TimeID);
}else{
TimeID = setTimeout( "scroll_left()" , actT);
}
}
// -->
</script>
</head>
<body onload="Init()">
<table border="0" cellspacing="0" cellpadding="0">
<!-- 横幅を３ページ分確保するためのダミー画像 -->
<tr>
<!-- PAGE1 -->
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="540" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<!-- PAGE2 -->
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="540" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<!-- PAGE3 -->
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="540" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<!-- PAGE4 -->
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="540" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<!-- PAGE5 -->
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="540" height="10" alt=""></td>
<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<!-- メイン -->
<tr>
<!-- PAGE1 -->
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<td valign="top">
<div class="contents">PAGE - 1</div>
ここには１ページ目の内容を書く。
</td>
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<!-- PAGE2 -->
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<td valign="top">
<div class="contents">PAGE - 2</div>
ここには２ページ目の内容を書く。
</td>
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<!-- PAGE3 -->
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<td valign="top">
<div class="contents">PAGE - 3</div>
ここには３ページ目の内容を書く。
</td>
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<!-- PAGE4 -->
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<td valign="top">
<div class="contents">PAGE - 4</div>
ここには４ページ目の内容を書く。
</td>
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<!-- PAGE5 -->
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
<td valign="top">
<div class="contents">PAGE - 5</div>
ここには５ページ目の内容を書く。
</td>
<td><img src="image/dummy.gif" width="30" height="350" alt=""></td>
</tr>
<!-- フッタ -->
<tr>
<!-- PAGE1 -->
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<td align="right">
<a href="JavaScript:void(0)" onclick="left(0)"><<</a>
<a href="JavaScript:void(0)" onclick="left(0)"><</a>
<a href="JavaScript:void(0)" onclick="right(600)">></a>
<a href="JavaScript:void(0)" onclick="right(2400)">>></a>
</td>
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<!-- PAGE2 -->
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<td align="right">
<a href="JavaScript:void(0)" onclick="left(600)"><<</a>
<a href="JavaScript:void(0)" onclick="left(600)"><</a>
<a href="JavaScript:void(0)" onclick="right(600)">></a>
<a href="JavaScript:void(0)" onclick="right(1800)">>></a>
</td>
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<!-- PAGE3 -->
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<td align="right">
<a href="JavaScript:void(0)" onclick="left(1200)"><<</a>
<a href="JavaScript:void(0)" onclick="left(600)"><</a>
<a href="JavaScript:void(0)" onclick="right(600)">></a>
<a href="JavaScript:void(0)" onclick="right(1200)">>></a>
</td>
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<!-- PAGE4 -->
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<td align="right">
<a href="JavaScript:void(0)" onclick="left(1800)"><<</a>
<a href="JavaScript:void(0)" onclick="left(600)"><</a>
<a href="JavaScript:void(0)" onclick="right(600)">></a>
<a href="JavaScript:void(0)" onclick="right(600)">>></a>
</td>
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<!-- PAGE5 -->
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
<td align="right">
<a href="JavaScript:void(0)" onclick="left(2400)"><<</a>
<a href="JavaScript:void(0)" onclick="left(600)"><</a>
<a href="JavaScript:void(0)" onclick="right(600)">></a>
<a href="JavaScript:void(0)" onclick="right(0)">>></a>
</td>
<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>紙芝居</title> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>紙芝居</title> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>紙芝居</title> </head> <body> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>紙芝居</title> </head> <body> </body> </html>