スライドとともにホームページで好評な手法にスクロールショーがあります。
ページ全体を移動させることにより、展望台から眺めているように見せる手法です。
１、横に長いページを作る
パソコン画面より数倍長い写真を用意します。
＜ＴＡＢＬＥ＞を使って横方向に継いでもかまいません。
２、表示位置の指定方法
|
|
パソコンの画面の左上にページのどの位置を合わせて表示するかを指定するには
ｓｃｒｏｌｌ（横座標 ，縦座標）；
と書けばいいのです。。
横スクロールならば、縦座標は固定なので、下の窓の部分だけ変動させます。
窓に、座標を入れて［Go］をクリックしてみてください。
|
その位置にページが移動したと思います。
３、連続移動
スクロールさせるには、横位置を少しづつ増やして行けばいい。
その方法は、サイコロをころがしたり、蝶を羽ばたかせたりしたときに使った、
「繰返しタイマー」を使い、０．１秒に３ピクセルづつ移動させるとすると
rl=3; //移動ピクセル
x=0; //スタート座標
function、mv(){
x=x+rl;
scroll(x,0);
setTimout("mv()",100);
}
と書けば動きます。
ただ、これですと、「Ｘ」がいつまでも加算されて、写真がどれだけあってもすぐはみ出してしまいます。
そこで
en=300; //写真の横幅（ピクセル）
if(x>en){x=0;}
のように、写真が一巡したら、最初に戻すようにしておくとよいでしょう。
さらに、ページの読込みが完了したら「自動起動」させたい。
それには＜ＢＯＤＹ＞タグの中に
ｏｎＬｏａｄ＝”命令（ ）”
と書きます。
具体的には
<BODY onLoad="mv()">
のように書けば、ページの準備が完了すると動き始めます。
|
|
それでは、下のボタンを押して体験してみてください。
写真の両端の模様がつながるようにしておけばエンドレスパノラマになります
|
ソース
|
<![CDATA[
<html>
<head>
<title>scroll</title>
<script language="javascript">
<!--
en=1600; //写真の横幅
rl=3; //スピード（移動ピクセル）
x=0;
//エンドレススクロール
function mv(){
x=x+rl;
if(x>en){x=0;}
scroll(x,0);
tm=setTimeout("mv()",50);
}
//-->
</script>
</head>
<body onLoad="mv()">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<img src="sakura.jpg" width=1600"></td><td><img src="sakura.jpg" width=1600">
</td></tr></table>
</body>
</html>
]]>
|
|
