SITEMAP [初めてのホームページ講座] [JavaScript , DHTML] [スライドメニュー]
Dynamic HTMLの参考書 Java Scriptの参考書

スライドメニュー

機能

テキストをスライドさせながら、規定の場所に到達するとアンカーに変わるダイナミックHTMLです。 残念ながら、NNではアンカーにどうしても変わらず動作が不安定です。 お使いになるかどうかは、皆さんの個人の責任のもとにお願いします。

利用方法

HEAD部分にスクリプトを記述します。 BODY部分には、DIV要素に対してID属性iL1,iL2・・・（テキスト分）を指定します。

改造方法

表示するテキストのスタイルや、位置関係、リンク先などを変更可能です。

スタイル(Style1)
CSSリファレンスに従って、変更可。
テキスト数
まず、Laymaxの数値（テキスト数）を変更します。 ID属性iLxを指定しているDIV要素を増やします。その時、iLxの「x」の部分の数値も変更します。 その他、下記の変数も同時に変更する必要があります。
Comments[x]
表示するテキスト。
Anchors[x]
リンク先URL。
Sposi[x]
表示開始する位置（ピクセル）。x=1のとき[1]がX座標、[2]がY座標。
Fposi[x]
表示終了する位置（ピクセル）。x=1のとき[1]がX座標、[2]がY座標。
Scount[x]
表示開始する時間。
Fcount[x]
表示開始してから終了するまでの時間。
ColorF[x]
テキストカラー。
表示開始位置、終了位置
下記の２つの変数をピクセル単位で指定します。 ただし、X,Y座標を同一の変数で表現するため、配列番号に注意して下さい。 例えば、iL1に対するX座標は[1]、Y座標は[2]となります。
Sposi[x]
表示開始する位置（ピクセル）。
Fposi[x]
表示終了する位置（ピクセル）。
表示、動作タイミング
actTで全体の速さを指定します。小さければ速く、大きければ遅くなります。 また、以下の変数によって詳細の変更も可能です。 具体的には、ページが読み込まれてから表示開始するまでのタイミングと、表示開始されてから終了するまでの動作時間です。
Scount[x]
表示開始する時間。
Fcount[x]
表示開始してから終了するまでの時間。
テキストカラー
ColorFを変更します。 この時、iLxの「x」の部分の数値に対応したテキストカラーが変更されます。

対応ブラウザ

IE4(NN4)以上

サンプル

［サンプルを見る］ ［ダウンロード］ 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

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

<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
<!--
//ブラウザのバージョンチェック
var brw_v = navigator.appVersion.charAt(0);
var brw_n = navigator.appName.charAt(0);
var iIE4 = false;
var iNN4 = false;
if((brw_v >= 4)&&(brw_n == "M"))iIE4 = true;
if((brw_v >= 4)&&(brw_n == "N"))iNN4 = true;

var Laymax = 4;		//レイヤーの最大数
var actT = 1;			//移動時間：速＝小

var Comments = new Array();
	Comments[1] = "逆引きHTMLリファレンス";
	Comments[2] = "HTML4.0リファレンス";
	Comments[3] = "JavaScript・DynamicHTML";
	Comments[4] = "スタイルシート(CSS)";

var Anchors = new Array();	//リンク先URL
	Anchors[1] = "http://www.hajimeteno.ne.jp/html32/index.html"
	Anchors[2] = "http://www.hajimeteno.ne.jp/html40/index.html"
	Anchors[3] = "http://www.hajimeteno.ne.jp/html/java.html"
	Anchors[4] = "http://www.hajimeteno.ne.jp/stylesheet/index.html"

var Sposi = new Array();	//スタート地点の座標
	Sposi[1] = -150;	//iL1:X
	Sposi[2] = 50;		//iL1:Y
	Sposi[3] = -150;	//iL2:X
	Sposi[4] = 100;	//iL2:Y
	Sposi[5] = -150;	//iL3:X
	Sposi[6] = 150;	//iL3:Y
	Sposi[7] = -150;	//iL4:X
	Sposi[8] = 200;	//iL4:Y

var Fposi = new Array(); 	//最終到達座標：Laymax*2個分のx,y座標
	Fposi[1] = 200;	//iL1:X
	Fposi[2] = 50;		//iL1:Y
	Fposi[3] = 200;	//iL2:X
	Fposi[4] = 100;	//iL2:Y
	Fposi[5] = 200;	//iL3:X
	Fposi[6] = 150;	//iL3:Y
	Fposi[7] = 200;	//iL4:X
	Fposi[8] = 200;	//iL4:Y

var Scount = new Array(); 	//移動開始するまでのカウント数：0は駄目
	Scount[1] =   2;	//iL1
	Scount[2] =  45;	//iL2
	Scount[3] =  90;	//iL3
	Scount[4] = 135;	//iL4

var Fcount = new Array(); 	//移動開始してから完了までのカウント数
	Fcount[1] = 50;	//iL1
	Fcount[2] = 50;	//iL2
	Fcount[3] = 50;	//iL3
	Fcount[4] = 50;	//iL4

var ColorF = new Array();
	ColorF[1] = "ffd000";
	ColorF[2] = "ff8000";
	ColorF[3] = "ff4000";
	ColorF[4] = "ff0000";

var Fflag = new Array();
	Fflag[0] = new Array();		//開始フラグ
	Fflag[1] = new Array();		//終了フラグ
	Fflag[2] = new Array();		//アンカーフラグ
var Ftflag = false;
var lay = new Array();
var Count = 0;
var Elm1 = "<DIV CLASS='Style1'>"
var Elm2 = "<\/DIV>"

function Init(){
	for(i = 1; i <= Laymax; i++){
		Fflag[0][i] = false;
		Fflag[1][i] = false;
		Fflag[2][i] = false;
	}
	for(i = 1; i <= Laymax; i++){
		if(iIE4){
			lay[i] = document.all("iL"+i);
			lay[i].style.visibility = "hidden";
		}
			if(iNN4){
			lay[i] = document.layers["iL"+i];
			lay[i].visibility = "hide";
		}
	}
	multiLay();
}

function multiLay(){
	var Xc,Yc;
	var TimeID,i;
	Count++;
	for(i = 1;i <= Laymax; i++){
		if(Scount[i] > Count){
			if(!Fflag[0][i]){
				Fflag[0][i] = true;
				if(iIE4){
					lay[i].style.visibility = "visible";
				}
				if(iNN4){
					lay[i].visibility = "show";
				}
			}
		}
	}
	if(Ftflag){
		clearTimeout(TimeID);
	}else{
		Ftflag = true;
		for(i = 1; i <= Laymax; i++){
			if(Fflag[0][i] && !Fflag[2][i]){
				CountTmp = Count - Scount[i];
				jx = i * 2 - 1;
				jy = i * 2;
				if(Fflag[1][i] || Fcount[i] == 0){
					Xc = Fposi[jx];
					Yc = Fposi[jy];
				}else{
					Xc = Math.round(Sposi[jx] + (Fposi[jx] - Sposi[jx])/Fcount[i] * CountTmp);
					Yc = Math.round(Sposi[jy] + (Fposi[jy] - Sposi[jy])/Fcount[i] * CountTmp);
				}
				SetColor(i,Xc,Yc);
				if(CountTmp >= Fcount[i]){
					Fflag[1][i] = true;
				}else{
					Ftflag = false;
				}
			}
			if(!Fflag[2][i] && Fflag[1][i]){
				Fflag[2][i] = true;
				Tmp = "<A Href='" + Anchors[i] + "' Class='Style1' Id='iL" + i + "'>";
				Tmp+= Comments[i] + "<\/A>";
				if(iIE4){
					lay[i].innerHTML = Tmp;
					lay[i].style.color = ColorF[i];
					lay[i].style.top = Fposi[i * 2];
					lay[i].style.left = Fposi[i * 2 - 1];
				}
				if(iNN4){
					lay[i].document.open();
					lay[i].document.fgColor = ColorF[i];
					lay[i].moveTo(Fposi[i * 2 - 1],Fposi[i * 2]);
					lay[i].document.write(Tmp);
					lay[i].document.close();
				}
			}
		}
		TimerID = setTimeout("multiLay()",actT);
	}
}

function SetColor(kkk,X,Y){
	if(iIE4){
		lay[kkk].style.color = ColorF[kkk];
		lay[kkk].innerHTML = Elm1 + Comments[kkk] + Elm2;
		lay[kkk].style.top = Y;
		lay[kkk].style.left = X;
	}
	if(iNN4) {
		lay[kkk].document.open();
		lay[kkk].document.fgColor = ColorF[kkk];
		lay[kkk].moveTo(X,Y);
		lay[kkk].document.write(Elm1 + Comments[kkk] + Elm2);
		lay[kkk].document.close();
	}
}
// -->
</SCRIPT>

</HEAD>

<BODY onload="Init()">

<DIV CLASS="Style1" ID="iL1"></DIV>
<DIV CLASS="Style1" ID="iL2"></DIV>
<DIV CLASS="Style1" ID="iL3"></DIV>
<DIV CLASS="Style1" ID="iL4"></DIV>

</BODY>
</HTML>
[Go To Top]
Copyright(C)1999 T.Miyazaki , All Rights Reserved.