スクリプトの解説と改造のヒント&例 特徴と注意 Quick TimeVRが代表するようなパノラマ表示ソフトは、プラグインのインストールを強要されます。 また、球変形をしながらの表示のためスクロール中はかなりの画質劣化がおこります。 それに比べ、Javaスクリプトの場合は、IEのみの機能で動作します。 また、画像その物を移動させますので、画質劣化はおこりませんし、大きな画像をそのままスクロールさせることが出来ます。 ただし、画面全体に表示されるような大きな画像は、PCの性能が低いとスムーズに動きません。 1.プログラム解説 2.スクロール速度 (w 及び t の関係) プログラム中の変数 t は、移動がおこる間隔で、単位はms、最低値は10(20,30のように10おきに設定します。10が最速です) プログラム中の変数 w は、一度に移動するドット数で単位は dot、1が最低値(0では当然動きません) 一秒間に移動するdot数は、w×(1000÷t ) 画像が大きな場合や、PCの性能が低い場合、t が小さいと移動が追いつかないので、大きめにしてみて下さい。 w = 1, t = 10 と w = 2, t = 20 と w = 4, t = 40 は同じスクロール速度です。 t を大きくすると、PCの負担が減ります。( w を大きくしてもPCの負担は変わりませんが、ガクガクします) この w と t の値を、onClickイベントやラジオボタン等で変更すれば、動作中にスクロール速度を可変出来ます。 3.逆スクロール&コントローラー /* 画像移動 */ 部分を変更すれば逆スクロール出来ますが、 ここに双方向機能を組み込むとプログラムがややこしくなりますし、判断部分が増えて動作が遅くなる可能性があります。 逆スクロールプログラムを別に作って、どちらを呼び出すかフラグ等で判断するのが賢明です。 逆スクロール・停止とコントローラーを含んだ例 4.窓表示 画像移動スクリプトですから、全幅スクロールしかできませんので工夫が必要です。 一つの方法として、透明窓の開いたGIFをかぶせる(このページでもミニブラウザをかぶせていますね) 別の方法としては、フレームを上手く組み合わせる方法があります。 例は載せませんが、iframe を使えば簡単に出来ます。 5.動き始めるまでの時間短縮 画像を全て読み込んでから動き出すようにしてますので、大きな画像の場合は読み込みに時間がかかります。 読み終わる前に動かす事は出来ますが、あまり意味ないですね。 このスクリプトは、同じ画像を2枚使っていますが、同じ画像である必要はありません。 そこで、大きな画像は、左右に2分割し、前半分を読み終えた時点でスクロールを開始し、 後ろ半分は、スクロール開始後に読み込むようにすれば、半分の時間で動き始めさせることが出来ます。 6.往復スクロール これは画像が端まで表示されたのをチェックして逆スクロールに切り替えるだけですが、 IEのJavaスクリプトでは、ブラウザの表示幅を得られません。 デスクトップの幅は得られるので、全画面表示されてる前提なら可能。 往復スクロールの例 |