FC2ブログ

1日1tech

JavaScript で「徐々に~する」を実装する

よくみかけるイエローフェードとかの「カーソルインすると色や大きさが変わって、徐々に元に戻っていく」みたいな実装って、Flash だったら onEnterFrame とか回してやって...と見当がつくのですが、タイムラインのない JavaScript だとどうやるの?っていう状態でした。
今回、送り火中継でカーソルインすると画像が徐々に大きくなるという実装をしているのですが、やっとこつがつかめました。

「setInterval で指定時間毎に実行(タイマー設定)」
「ある条件を満たしたら clearIntervalでタイマー解除」


これ。たったこれだけ。
テキストエディタで編集できる・動作が軽快・プラグインいらずな事考えたら、こっちのが私には向いてるかも。


ちなみにこの手法、同僚が持ってた下記の本を借りて、知ることができました。以前書店で探した時は、Ajax とは?から始まって延々と GoogleMaps やらの説明が載ってる一般教養本や、いきなり Yahoo UI Library の紹介が載ってるリファレンス本みたいなのが目についていたのですが、この本はなんというか、本当に知りたいところが、きちんと段階的に書かれていっている感じで、すごくわかりやすいです。
JavaScript は全く初めて!プログラムもこれが初めて!な人には勧めませんが、これまで light weight な言語でもいじってきていて、ちょっと ajax なるものもさわってみようかな~という人には自信をもってお勧めします。


  1. 2006/08/20(日) 20:36:27|
  2. develop|
  3. トラックバック:0|
  4. コメント:0

JavaScript でマウスホイールのイベントを取得

忘れないように、メモ。MSIE だけでなく、Opera, Mozilla でもいけるコードになっているようです。
GoogleMaps みたく、拡大縮小操作や、奥行き方向の操作に割り当てると便利そう。
Windows の場合は、ほとんどのマウスにホイールがついてるけど、Mac の事を考えると微妙だし(まんまるマウスや、こないだまで販売されてた透明なやつとか)、標準のUI として使うにはまだまだかなぁ。


GIGAZINE - マウスホイールの回転イベントをJavaScriptで検知する
http://gigazine.net/index.php?/news/comments/20060725_javascript_wheel/
  1. 2006/07/27(木) 12:56:45|
  2. develop|
  3. トラックバック:0|
  4. コメント:0
前のページ