上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
--.--.-- -- l スポンサー広告 l top ▲

script.aculo.us なんとなくエフェクト使っては見たが、同時に使ったりすると、挙動がおかしい・・・ 放置しておくのもイヤだったので、調べてみたところ、queue オプションでなんとかなりそうだったので、少し使ってみた。

System55hz blog: script.aculo.us effect.js: Queueの使い方

//同時に実行される。
  new Effect.Appear('id',{
    duration :1
  });
  new Effect.SlideDown('id',{
    duration :1
  });
//順番に実行される。
  new Effect.Appear('id',{
    duration :1
  , queue :{position:'end',scope:'scopename',limit:2}
  });
  new Effect.SlideDown('id',{
    duration :1
  , queue :{position:'end',scope:'scopename',limit:2}
  });

使ってみて気づいたのだが、 Effect.Shakequeue が働かない!?(これだけじゃないかも) effects.js の中身確認してみたら、連続でnew Effect.Moveしてるだけか! しかも、options 渡してないし・・・

どうにも気に入らなかったので、自分で Effect.Shake 書き換えてしまった。 options を少し変えてしまったが、使い勝手は悪くないはず...

動作確認

  • Windows XP SP2
    • Internet Explorer 6.0.2900
    • FireFox 2.0.0.11
    • Opera 9.25
    • Safari 3.0.4

/*
  Effect.Shake の処理にバグがあったので、書き直した。
  (整数型の変数が32bit以上という前提で作りました)
  変更:countオプションで Shake する回数を決めることが出来ます。
        ※ 実際は count * (to - from) 回
  変更:x, y オプションで要素を X 及び Y 方向へ移動することができます。
        処理終了後、元の位置に戻ります。
*/
Effect.Shake = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      count:4
      ,x:20
      ,y:0
      ,duration:0.5
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {
    this.element.makePositioned();
    this.originalLeft = parseFloat(this.element.getStyle('left') || '0');
    this.originalTop  = parseFloat(this.element.getStyle('top')  || '0');
  },
  update: function(pos) {
    var px = Math.abs((Math.floor(pos*this.options.count*0x20000-0x10000)&0x3ffff)-0x20000)-0x10000;
    this.element.setStyle({
//      left: (this.options.x * px / 0x10000 + this.originalLeft).round() + 'px'
//      ,top: (this.options.y * px / 0x10000 + this.originalTop).round()  + 'px'
      left: (((this.options.x * px) >> 16) + this.originalLeft).round() + 'px'
      ,top: (((this.options.y * px) >> 16) + this.originalTop).round()  + 'px'
    });
  },
  finish: function(pos) {
    this.element.setStyle({
      left: this.originalLeft + 'px'
      ,top: this.originalTop  + 'px'
    });
  }
});

↑を使用したサンプルコード

  new Effect.Shake('id',{
    queue :{position:'end',scope:'scopename',limit:3}
  });
  new Effect.Shake('id',{
    count:8,    // Shake する回数
    x:0,        // X 方向の移動距離
    y:20,       // Y 方向の移動距離
    queue :{position:'end',scope:'scopename',limit:3}
  });
  new Effect.Shake('id',{
    count:4,    // Shake する回数
    x:20,       // X 方向の移動距離
    y:-5,       // Y 方向の移動距離
    // Effect.Base を継承しているので DefaultOptions も設定可能
    duration:4, // 処理時間
    queue :{position:'end',scope:'scopename',limit:3}
  });

特に問題が無ければ、このコード、 script.aculo.us に送ってみようかとも思ったが、英語が分からない・・・

スポンサーサイト
2008.01.10 Thu l JavaScript l COM(0) TB(0) l top ▲

コメント

コメントの投稿












       

トラックバック

トラックバックURL
→http://weblabs.blog18.fc2.com/tb.php/2-5167bc1d
この記事にトラックバックする(FC2ブログユーザー)

i2i無料WEBパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。