Cross Browser のための DHTML


・レイア移動オブジェクト

ダイナミックに演出したい時レイアを移動することはよく使われる手法です。 場合によっては移動する経路や比率を計算して、より効果的にすると良い場合も多々あります。 しかし、そのような処理をページ構成に合わせて毎回作成するのも面倒です。

そこで移動計算する処理を汎用のオブジェクトにしてみてはどうでしょう。

デモを見る

このサンプルは3種類の移動オブジェクトの使用例で、 「直線」は直線上を等間隔で移動する直線移動オブジェクト、 「振り子」は最初と最後で遅く中央で早く移動するオブジェクト、 「円」は指定された2点間を半円を描くように移動するオブジェクトです。

以下に各オブジェクトの代表として直線移動オブジェクトのコードを示します。

<script language="JavaScript1.2"><!--
// ======= 直線移動オブジェクト ========
// コンストラクタ
//   new Linear(div);
//     div : 移動対象のレイアオブジェクト
function Linear(div){
  this.div = div;
}

// 目的地設定メソッド( 絶対座標 )
//   setTargetTo(x,y,times)
//     x,y   : 目的座標( 絶対座標 )
//     times : フレーム数
Linear.prototype.setTargetTo = function(x,y,times){
  this.targetX = x;   this.targetY = y;
  this.times = times; this.time  = 0;
  this.originX = getDivLeft(this.div);
  this.originY = getDivTop (this.div);
}

// 目的地設定メソッド( 相対座標 )
//   setTargetBy(x,y,times)
//     x,y   : 目的座標( 相対座標 )
//     times : フレーム数
Linear.prototype.setTargetBy = function(x,y,times){
  this.times = times; this.time = 0;
  this.originX = getDivLeft(this.div);
  this.originY = getDivTop (this.div);
  this.targetX = this.originX+x;
  this.targetY = this.originY+y;
}

// 移動メソッド
//   bool move()
//     戻り値 : true = 終了, false = 未終了
Linear.prototype.move = function(){
  if(this.time<this.times){
    this.time++;
    moveDivTo(this.div,
      (this.targetX-this.originX)*this.time/this.times
      +this.originX,
      (this.targetY-this.originY)*this.time/this.times
      +this.originY
      );
    return false;
  }
  return true;
}

// 位置情報リセットメソッド
//   reset()
Linear.prototype.reset = function(){
  moveDivTo(this.div,this.originX,this.originY);
  this.time=0;
}
// --></script>

この文字の部分は「ライブラリ集」で紹介している関数です。 上のスクリプトでは記述されていませんが、実際には「ライブラリ集」を参照して追加してください。

他の「振り子移動」「円周移動」オブジェクトも基本的な構造は同じで、 位置計算が異なるだけです。 興味のある方はこの HTML のソースをご覧下さい。
#> 手抜き... f(^^;

各オブジェクトのメソッドとプロパティを以下に示します。

直線移動オブジェクト

コンストラクタ
  Linear(div);
    div   : 移動対象のレイアオブジェクト

目的地設定メソッド( 絶対座標 )
  setTargetTo(x,y,times)
    x,y   : 目的座標( 絶対座標 )
    times : フレーム数

目的地設定メソッド( 相対座標 )
  setTargetBy(x,y,times)
    x,y   : 目的座標( 相対座標 )
    times : フレーム数

移動メソッド
  bool = move();
    戻り値 : true = 終了, false = 未終了

位置情報リセットメソッド
  reset();

振り子移動オブジェクト

コンストラクタ
  Pendulum(div);
    div   : 移動対象のレイアオブジェクト

目的地設定メソッド( 絶対座標 )
  setTargetTo(x,y,times)
    x,y   : 目的座標( 絶対座標 )
    times : フレーム数

目的地設定メソッド( 相対座標 )
  setTargetBy(x,y,times)
    x,y   : 目的座標( 相対座標 )
    times : フレーム数

移動メソッド
  bool = move();
    戻り値 : true = 終了, false = 未終了

位置情報リセットメソッド
  reset();

円周移動オブジェクト

コンストラクタ
  Circle(div);
    div   : 移動対象のレイアオブジェクト

目的地設定メソッド( 絶対座標 )
  setTargetTo(x,y,times)
    x,y   : 目的座標( 絶対座標 )
    times : フレーム数

目的地設定メソッド( 相対座標 )
  setTargetBy(x,y,times)
    x,y   : 目的座標( 相対座標 )
    times : フレーム数

移動メソッド
  bool = move();
    戻り値 : true = 終了, false = 未終了

位置情報リセットメソッド
  reset();

使用例1 - 簡易スライドメニュー

冒頭のデモスクリプトを紹介してもあまり喜ばないと思うので(笑)、 Pendulum オブジェクトを利用した簡易スライドメニューで紹介しましょう。 f(^^;

out menudesktopconsolecontrolhelphomebrowsereditor in

上のを操作すると左からメニューバーがスライドしてきます。 左端のを操作するとメニューバーが左端に戻ります。

注 メニュー項目はクリックしても何もしません(笑)。

<script language="JavaScript"><!--
// 簡易スライドメニューのスクリプト
slideInterval=20;   // 移動インターバル
slideFrame   =30;   // フレーム数
menu         =null; // メニュー用移動オブジェクト
menuTid      =null; // タイマ識別子
// スライド関数
//   slide( ID名称, 目的地のX座標 );
function slide(nm,x){
  // 移動中ならリセットする
  if(menuTid){ clearTimeout(menuTid); menuTid=null; }
  if(menu==null){
    // 初期化していなければ初期化する
    var div = getDivFromName(nm);
    if(div==null) return;
    initDivPos(div); initDivSize(div);
    menu = new Pendulum(div);
  }
  // 目的地を設定する
  menu.setTargetTo(x,getDivTop(menu.div),slideFrame);
  slideAction();
}
// スライド動作関数
function slideAction(){
  menuTid=(menu && !menu.move())
         ?setTimeout('slideAction()',slideInterval)
         :null;
}
// --></script>

<style type="text/css"><!--
/* メニューレイアのスタイル */
    /* メニューには不定要素がないのでサイズは計算できる */
#sm1{ position:absolute; left:-452px; width:472px; height:56px; }
--></style>
    :
<div id="sm1">
<table border=1 cellspacing=0 cellpadding=0 bgColor="#eeeeee">
<tr>
<td>
  <a href="javascript:void(0);"
     onClick="slide('sm1',-452); return false;">
  <img src="panel-arrow-left.gif" border=0 width=12></a>
</td>
<td nowrap>
<img src="go.gif"        border=0 width=48>
<img src="konqueror.gif" border=0 width=48>
</td>
<td>
  <a href="javascript:void(0);"
     onClick="slide('sm1',0); return false;">
  <img src="panel-arrow-right.gif" border=0 width=12></a>
</td>
</tr></table></div>
    :

この文字の関数は例によって「ライブラリ集」で紹介している関数です。 例によってスクリプトには記述していませんが実際には追加して記述する必要があります。

この文字の部分はこのサンプル特有の部分です。

スクリプトで定義している slide 関数は汎用的な構造ではなく、 'sm1' レイアを単に横移動するだけの単純な関数で、 データの初期化もこの関数内で行っています。

初期化処理は移動オブジェクト( この例では Pendulum )の生成と 移動対象のレイア( ここでは sm1 )の位置とサイズの初期化を行います。

次に移動動作をするために目的地の座標を setTargetTo メソッドで設定し、 実際の移動操作を開始( slideAction関数 )します。

slideAction 関数では移動オブジェクトに対し目的地に到達するまで 一定周期で move メソッドを実行します。

また、目的地に到達したかどうかは move メソッドの戻り値で判断します。

メニューのスライド動作は、この例ではリンクタグを利用していますが、 slide関数を呼び出すだけなので、ボタンでも他のマウスイベントでもかまいません。


使用例2 - マウストレーサ

よくある、マウスを追いかけるヤツなんかも移動オブジェクトを使えば比較的簡単にできます。 アタシはこの手のウザいものは好きではないので、 説明はナシで、いい加減に作成したサンプルだけ紹介しておきますね〜 f(^^;

パターンを 直線 で移動する
パターンを 振り子 で移動する
パターンを 円周 で移動する
移動しない


注意事項


Copyright(c) 1998 - 2001 ShinSoft. All rights reserved.