ここまでくると、
スクロールを早送りしたり、静止させたり、巻き戻してみたり、したくなります。
原理は簡単です。
前ページで、スピードを移動ピクセル数で、「 ｒｌ 」という置場に入れて使いました。
すなわち
ｒｌ＝３；
と書いてありました。
これを、入替えれば、スピードや移動方向が変えられそうです。
ｒｌ＝１０；とすれば早送りに
ｒｌ＝−３；とすればマイナス方向、すなわち逆転に
ｒｌ＝０；とすれば静止するはずです。
それでは、この値をどうして、伝えて、置場の値と入れ替えたらいいでしょう。
それには＜ＦＯＲＭ＞の＜ＩＮＰＵＴ＞タグを使います。
＜ＦＯＲＭ＞
＜ＩＮＰＵＴ ｔｙｐｅ＝”ｂｕｔｔｏｎ” ｖａｌｕｅ＝”表示” ｏｎＣｌｉｃｋ＝”命令（ 値 ）”＞
＜／ＦＯＲＭ＞
スピード置場の値を入替える命令はどのように作ればいいかというと
ｆｕｎｃｔｉｏｎ 命令（ 仮置場名）｛
｝
（ ）の中に送られてくる値の仮置場名を書いておき
仮置場から、スピードを格納してある置場に
ｒｌ＝ｄ；
のように移すだけでいいのです。
具体的には
ｆｕｎｃｔｉｏｎ ｉｒｅｋａｅ（ ｄ ）｛
ｒｌ＝ｄ；
｝
のように書きます。
写真の上にボタンを配置して、ボタンをクリックするとその方向に動き出すページを作って見ますと
ここをクリックしてセットしてください。
表示されたら、［ ＞ ］ボタンをクリックして動かせてください。
初期化/セット
ボタンも一緒に動いてしまって、隠れてしまいました。これでは使い物になりません。
ボタンは静止し、写真だけ動かすのはどうしたらいいでしょう。
まず、ボタンのページと写真のページは別々のページにします。
ＪａｖａＳｃｒｉｐｔはボタンのページに書き、写真ページは
写真に表示だけのページにします。
この二つのページを一画面に表示するにはフレームを使います。
<![CDATA[
<html>
<head><title></title></head>
<frameset rows="26,*">
<frame name="ue" src="button.htm">
<frame name="sita" src="syasin.htm">
</frameset>
</html>
]]>
と書くとボタンのページが、上の２６ピクセルのフレームに、下のプレームには写真のページがセットされます
それではここをクリックしてセットしてください
初期化/セット
問題は、ボタンのページのＪａｖａＳｃｒｉｐｔの命令で、別のページを制御するかですが
ｐａｒｅｎｔ ．フレーム名 ．命令（ ）;
と書くと、そのフレーム名のところにセットされているページに反映されるのです。
したがって、前項では
ｓｃｒｏｌｌ（ｒｌ，０）；
と書かれていたスクロール命令を
ｐａｒｅｎｔ ．ｓｉｔａ．ｓｃｒｏｌｌ（ｒｌ，０）；
と書きかえるだけで、写真のページが制御できるのです。
それでは、ボタンをいろいろクリックしてみてください。
ソース
汎用性を高めるため、若干変更してあります。
| フレームページ |
|---|
|
<![CDATA[
<html>
<head><title></title></head>
<frameset rows="26,*">
<frame name="button" src="button.htm" scrolling="no">
<frame name="syasin" src="syasin.htm">
</frameset>
</html>
]]>
| ボタンページ
button.htm |
|---|
<![CDATA[
<html>
<head><title></title>
<script language="javascript">
<!--
rl=3; //スピード（移動ピクセル）
flg=0;
en=2000; //スクロール長さ（写真の横幅）
x=0;
tm="";
//エンドレススクロール
function mv(){
flg=1;
x=x+rl;
if(x>en){x=0;}
if(x<0){x=en;}
parent.syasin.scroll(x,0); //syasinはスクロールさせるフレーム名
tm=setTimeout("mv()",50);
}
//速度・方向
function mv_rl(d){
rl= d;
if(flg==0){
mv();
}
}
//静止
function mv_off(){
flg=0;
clearTimeout(tm);
}
//-->
</script>
</head>
<body bgcolor=#cccccc topmargin=0 marginheight="0">
<center>
<form>
<input type="button" value="＜＜" onClick="mv_rl(-10)">
<input type="button" value=" ＜ " onClick="mv_rl(-3 )">
<input type="button" value=" | | " onClick="mv_off()">
<input type="button" value=" ＞ " onClick="mv_rl(3)">
<input type="button" value="＞＞" onClick="mv_rl(10)">
</form>
</center>
</body>
</html>
]]>
| 写真ページ
syasin.htm |
|---|
<![CDATA[
<html>
<head><title></title></head>
<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0>
<table border=0 cellspacing=0 cellpadding=0 width=4000><tr>
<td><img src="sakura.jpg" width=2000><br></td>
<td><img src="sakura.jpg" width=2000><br></td>
</tr></table>
</body>
</html>
]]>
|
|