..



 ■HomeJavaScriptサンプル集〔インタラクティブ編〕−ウインドウ制御(動きながら大きくなって出現するウインドウ)

JavaScript 無料のフリースクリプト集...
動きながらウインドウ出現 
動きながら大きくなって出現するウインドウ

 リンクするとウインドウが動きながら大きくなって出現するウインドウを作ります。サンプルは「画像制御」のスライドショー(自動)が表示されます。


 HPでの使用方法
1.<head>〜</head>タグ間の編集

 この効果を使うHTMLの<head>〜</head>タグ間に次の赤字の部分を挿入してください。

<script language="JavaScript"><!--
   startX=0;
   startY=0;
   startW=100;
   startH=64;
   endX=200;
   endY=100;
   endW=512;
   endH=350;

   var winMTimeId;
   wmx=(endX-startX)/20;
   wmy=(endY-startY)/20;
   wmw=(endW-startW)/20;
   wmh=(endH-startH)/20;

   function winMove()
   {
      startX+=wmx;
      startY+=wmy;
      startW+=wmw;
      startH+=wmh;
      if(startX>endX){clear.Interval(winMTimeId);}
      window.moveTo(startX,startY);
      window.resizeTo(startW,startH);
   }

winMTimeId=setInterval('winMove()',25);

// --></script>

2.使い方

 変数の数値を変更することで色々な大きさに対応させることができます。最初に一瞬ウインドウが大きく表示されるのが気になるときは「window.open」メソッドでウインドウの初めの大きさと座標位置に表示させるとスムーズに表示されます。

 startX
 ウインドウの初めのX座標
 startW
 ウインドウの初めの幅
 startY
 ウインドウの初めのY座標
 startH
 ウインドウの初めの高さ 
 endX
 ウインドウの最終のX座標
 endW
 ウインドウの最終の幅
 endY
 ウインドウの最終のY座標
 endH
 ウインドウの最終の高さ
 注)endXはstartXより大きい値にしてください
 
..






..