SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [紙芝居(横)]

Dynamic HTMLの参考書 Java Scriptの参考書

紙芝居(横)

機能

全体をフレームで構成して、ウインドウ内部にインラインフレーム的に枠を作ります(これは必須ではない)。 そのフレームを横方向にスクロールさせ、ページ切替をビジュアルに行います。 如何にも「紙芝居」のようなので(?)・・・

スクロールスピードはサンプルが最も速い状態で、遅くすることは可能です。 また、スクロールの仕方(演出方法)は、スクリプトを変更することで可能となりますが、自身ある方だけやって下さい。

類似サンプル

  1. なし

利用方法

フレームのメインとなるHTMLファイルには、各フレームに各HTMLファイルを割り当てます。 この中で、中心に位置するHTMLファイルにスクリプトを記述し、それがスクロール可能となります。 周りの4枚のHTMLファイルはお好きに彩り下さい。ここではダミーとして扱い、特に何も記述しておりません。 HTMLファイルの構成は以下のようになっています。

スクリプトを記述したファイル単体でも動作可能です。従って、特に断りがなければ以下このファイルについての説明をします。

各ページはテーブルで構成しています。 テーブルでwidth属性を指定するのではなく、1*1ピクセルのダミー画像をうまく配置して、テーブルの各セルの幅、高さをコントロールしています。 この方法については、皆さんの方が詳しいでしょうから解説しません。 わからない方はHTMLソースをご覧下さい。

例えばセルの幅が600ピクセルとすると、ページスクロール分は600ピクセルを指定します。 2ページ分だと1200ピクセルとなります。 指定する部分はアンカーのonclick属性に指定する関数の引数に指定します。 詳細は下記説明をご覧下さい。 また、右にスクロールする場合、左にスクロールする場合で指定する関数名が異なりますので、ご注意下さい。

この時、テーブルにおけるcellpadding属性やcellspacing属性に0を指定しておくと良いでしょう。

右にスクロール(600ピクセル)
<a href="JavaScript:void(0)" onclick="left(600)">&lt;&lt;</a>
左にスクロール(1200ピクセル)
<a href="JavaScript:void(0)" onclick="right(1200)">&gt;&gt;</a>
スクロールスピード(var actT = 1)
「1」を最小として、大きくするほど遅くなります。

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

サンプルを見る] [ダウンロード

[Go To Top]

ソース(フレームメイン「sp58.html」)

<!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>

ソース(スクリプト「sp58_main.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">

<!-- 横幅を3ページ分確保するためのダミー画像 -->
<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>
		ここには1ページ目の内容を書く。
	</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>
		ここには2ページ目の内容を書く。
	</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>
		ここには3ページ目の内容を書く。
	</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>
		ここには4ページ目の内容を書く。
	</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>
		ここには5ページ目の内容を書く。
	</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)">&lt;&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="left(0)">&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(2400)">&gt;&gt;</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)">&lt;&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="left(600)">&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(1800)">&gt;&gt;</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)">&lt;&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="left(600)">&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(1200)">&gt;&gt;</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)">&lt;&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="left(600)">&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;&gt;</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)">&lt;&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="left(600)">&lt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(600)">&gt;</a>&nbsp;&nbsp;
		<a href="JavaScript:void(0)" onclick="right(0)">&gt;&gt;</a>
	</td>
	<td><img src="image/dummy.gif" width="30" height="20" alt=""></td>
</tr>
</table>

</body>
</html>

ソース(上ダミー「sp58_top.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>

ソース(下ダミー「sp58_bottom.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>

ソース(左ダミー「sp58_left.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>

ソース(右ダミー「sp58_right.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>
[Go To Top]

Last modified Nov,2000
Copyright(C)2000 T.Miyazaki , All Rights Reserved.