戻る

簡易版３６０度スクロールJavaスクリプトの解説　（コントローラー無し）

　このＪａｖａスクリプトはＩＥ４．０以上を対象としています。
　ページ作成から順に解説してありますが、すでに作成済みページの写真をスクロールさせることも出来ます。


写真を１枚表示する場合のソースリストです。
ホームページ作成ソフトで作ってもらってかまいません。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG src="img.jpg">
</BODY>
</HTML>

このように表示され、はみ出した部分はブラウザのスクロールバーを使って見ることになります。
ホームページ作成ソフトによって、<IMG src="img.jpg">のところに
<IMG src="img.jpg" width="254" height="54" border="0">のように写真のサイズが入ります。
この部分は削除して<IMG src="img.jpg">にして下さい。

３６０度連続表示用に、同じ写真をもう一枚並べます。
黄色文字部分を追加してください。
もとからある<IMG>タグと同じ内容を並べて書きます。
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<IMG src="img.jpg"><IMG src="img.jpg">
</BODY>
</HTML>


横に並べたはずが、表示してみると自動改行され、縦に並んでしまいます。

これでは都合が悪いので、強制的に横に並べます
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<TABLE>
<TBODY>
<TR>
<TD nowrap><IMG src="img.jpg"><IMG src="img.jpg"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

これで準備完了です。
次にスクロールプログラムを追加しますので、ここまでの表示が確実に出るようにしておいて下さい。
スクロールして、切れ目なく並んでいることを確認します。
（画像ファイル名 img.jpg は、当然自分が表示させたい画像のファイル名を書きます）

次にスクロールプログラムを追加します。
ＣＳＳのプロパティをＪａｖａスクリプトで書き換えて画像を移動させています。
w と t の値を変えると、移動速度を変える事が出来ます。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
w = 1 ; // 移動距離
t = 20 ; // 割り込み間隔

/* サイズ設定 */
function p_mov(){
p1 = -(pic1.width + 20) ;
p3 = -(pic1.width + pic2.width + 20) ;
p_mov1() ;
}

/* 画像移動 */
function p_mov1(){
pic1.style.posLeft -= w ; pic2.style.posLeft -= w ;
if ( pic1.style.posLeft < p1) { pic1.style.posLeft = pic2.style.posLeft + ( pic1.width + pic2.width)} ;
if ( pic2.style.posLeft < p3) { pic2.style.posLeft = pic1.style.posLeft} ;
timerID = setTimeout( "p_mov1()", t ) ;
}
// -->
</SCRIPT>
</HEAD>
<BODY onload = "p_mov()">
<TABLE>
<TBODY>
<TR>
<TD nowrap><IMG id = "pic1" style="position : relative" src="img.jpg"><IMG id = "pic2" style="position : relative" src="img.jpg"></TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

追加部分はこのページの文字をコピーすれば、間違いなく入力出来ます。
表示原理は見ての通りです。アルゴリズムを解析して、改造にチャレンジしてみてください。

スクリプトの解説と改造のヒント＆例

このスクリプトの使用は自由ですが、ご使用の際は「瀬戸の夜景」へのリンク掲載をお願いいたします。

戻る