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

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

紙芝居(縦)

機能

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

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

類似サンプル

  1. 紙芝居(横)

利用方法

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

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

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

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

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

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

対応ブラウザ

IE4,IE5,NN4,N6

サンプル

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

[Go To Top]

ソース(フレームメイン「sp62.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="sp62_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="sp62_top.html" scrolling="no" noresize marginwidth="0" marginheight="0" name="top">
		<frame src="sp62_main.html" marginwidth="0" marginheight="0" scrolling="auto" frameborder="no" name="main">
		<frame src="sp62_bottom.html" marginwidth="0" marginheight="0" scrolling="no" noresize name="bottom">
	</frameset>
	<frame src="sp62_right.html" scrolling="no" marginwidth="0" noresize name="right">
</frameset>

<noframes>
<body>
</body>
</noframes>

</html>

ソース(スクリプト「sp62_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 scry,dy,y,iniy,viewy;

function Init(){
	dy = 0;
	y = 0;
	iniy = 0;
	viewy = iniy;
}

function up(rq){
	scry = rq;
	iniy = viewy;
	dy = 0;
	y = 0;
	scroll_up();
}

function down(rq){
	scry = rq;
	iniy = viewy;
	dy = 0;
	y = 0;
	scroll_down();
}

function scroll_down(){
	var tgty = iniy + scry;
	if( y < (scry/2) ){
		dy++;
	}else if( y > (scry/2) ){
		dy--;
		dy = Math.max(dy , 1);
	}
	y += dy;
	viewy = iniy + y;
	viewy = Math.min( viewy , tgty );
	self.scroll(0,viewy);
	if(viewy >= tgty){
		clearTimeout(TimeID);
	}else{
		TimeID = setTimeout( "scroll_down()" , actT);
	}
}

function scroll_up(){
	var tgty = iniy - scry;
	if( y < (scry/2) ){
		dy++;
	}else if( y > (scry/2) ){
		dy--;
		dy = Math.max(dy , 1);
	}
	y += dy;
	viewy = iniy - y;
	viewy = Math.max( viewy , tgty );
	self.scroll(0,viewy);
	if(viewy <= tgty){
		clearTimeout(TimeID);
	}else{
		TimeID = setTimeout( "scroll_up()" , actT);
	}
}

// -->
</script>

</head>

<body onload="Init()">

<table border="0" cellspacing="0" cellpadding="0">

<!-- 縦幅を5ページ分確保するためのダミー画像 -->

<!-- PAGE1 -->
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="380" alt=""></td>
	<td valign="top">
		<div class="contents">PAGE - 1</div>
		ここには1ページ目の内容を書く。
	</td>
	<td valign="bottom">
		<a href="JavaScript:void(0)" onclick="up(0)">▲</a><br>
		<a href="JavaScript:void(0)" onclick="up(0)">△</a><br>
		<a href="JavaScript:void(0)" onclick="down(400)">▽</a><br>
		<a href="JavaScript:void(0)" onclick="down(1600)">▼</a>
	</td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>

<!-- PAGE2 -->
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="380" alt=""></td>
	<td valign="top">
		<div class="contents">PAGE - 2</div>
		ここには2ページ目の内容を書く。
	</td>
	<td valign="bottom">
		<a href="JavaScript:void(0)" onclick="up(400)">▲</a><br>
		<a href="JavaScript:void(0)" onclick="up(400)">△</a><br>
		<a href="JavaScript:void(0)" onclick="down(400)">▽</a><br>
		<a href="JavaScript:void(0)" onclick="down(1200)">▼</a>
	</td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>

<!-- PAGE3 -->
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="380" alt=""></td>
	<td valign="top">
		<div class="contents">PAGE - 3</div>
		ここには3ページ目の内容を書く。
	</td>
	<td valign="bottom">
		<a href="JavaScript:void(0)" onclick="up(800)">▲</a><br>
		<a href="JavaScript:void(0)" onclick="up(400)">△</a><br>
		<a href="JavaScript:void(0)" onclick="down(400)">▽</a><br>
		<a href="JavaScript:void(0)" onclick="down(800)">▼</a>
	</td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>

<!-- PAGE4 -->
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="380" alt=""></td>
	<td valign="top">
		<div class="contents">PAGE - 4</div>
		ここには4ページ目の内容を書く。
	</td>
	<td valign="bottom">
		<a href="JavaScript:void(0)" onclick="up(1200)">▲</a><br>
		<a href="JavaScript:void(0)" onclick="up(400)">△</a><br>
		<a href="JavaScript:void(0)" onclick="down(400)">▽</a><br>
		<a href="JavaScript:void(0)" onclick="down(400)">▼</a>
	</td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>

<!-- PAGE5 -->
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="380" alt=""></td>
	<td valign="top">
		<div class="contents">PAGE - 5</div>
		ここには5ページ目の内容を書く。
	</td>
	<td valign="bottom">
		<a href="JavaScript:void(0)" onclick="up(1600)">▲</a><br>
		<a href="JavaScript:void(0)" onclick="up(400)">△</a><br>
		<a href="JavaScript:void(0)" onclick="down(0)">▽</a><br>
		<a href="JavaScript:void(0)" onclick="down(0)">▼</a>
	</td>
</tr>
<tr>
	<td><img src="image/dummy.gif" width="20" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="530" height="10" alt=""></td>
	<td><img src="image/dummy.gif" width="30" height="10" alt=""></td>
</tr>


</table>

</body>
</html>

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

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

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

ソース(右ダミー「sp62_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 Mar,2001
Copyright(C)2001 T.Miyazaki , All Rights Reserved.