ウィンドウを指定サイズまで横、縦の順でズームする


動作ブラウザ 【 IE:4.0  NN:4.0
Internet Explorer Netscape Navigator DreamPassport iCab
3.0x 4.0x 4.5 5.0x 5.5 2.0x 3.0x 4.0x 4.x 6.0 2 3 2.x
Windows × - × × - × -
Macintosh × - × × - -
UNIX - - - - - × × - - -
Dreamcast - - - - - - - - - - × × -

ポイント function resizeWin1() { resizeBy((ww-w)/step,0); count--; if (count > 0) { setTimeout("resizeWin1()",100); }else{ count = num; setTimeout("resizeWin2()",100); } } function resizeWin2() { resizeBy(0,(hh-h)/step); count--; if (count > 0) setTimeout("resizeWin2()",100); }
説  明 ウィンドウを指定サイズまでズームするにはresizeBy()を使って相対的にサイズを変更します。変更幅をサイズ変更回数で割った値が一回のサイズ変更ピクセル数になります。横に広がる関数と縦に広がる関数を用意し、横が広がったらsetTimeout()で縦に広がる関数を呼び出すことで横、縦の順番でズームさせることができます。
サンプル <html> <head> <title>ウィンドウを指定サイズまで横、縦の順でズームする</title> <script Language="JavaScript"><!-- w = 420; h = 380; ww = 540; hh = 480; num= 10; // ズームするまでの回数 step = count = num; resizeTo(w,h); function resizeWin1() { resizeBy((ww-w)/step,0); count--; if (count > 0) { setTimeout("resizeWin1()",100); }else{ count = num; setTimeout("resizeWin2()",100); } } function resizeWin2() { resizeBy(0,(hh-h)/step); count--; if (count > 0) setTimeout("resizeWin2()",100); } // --></script> </head> <body onLoad="resizeWin1()"> ウィンドウサイズを指定サイズまでズームする </body> </html>
補足説明 IEとNNではresizeTo()で指定されるサイズの解釈に違いがあるためresizeTo(400,300)とした場合、IE,NNでは異なるサイズでウィンドウが表示されます。

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!

写真素材 PIXTA