2013年11月23日土曜日

[JavaScript] テキストボックスやボタンの幅を変えるアニメーション

JavaScript for widgets Animations
JavaScriptでテキストボックスを伸縮させるのWebコンテンツを作ってみました。

次の環境で動作確認しました。
・32bit版Windows7のInternet Explorer10
・64bit版Windows8のInternet Explorer10
・Windows8のFirefox25

これはテキストボックスは通常の大きさです。
このテキストボックスにカーソルをフォーカスすると幅がグイーンと伸びます。
カーソルを移動してフォーカスを失うとアニメーションしながら元の幅に戻ります。

以下ソースです。

stretchElement関数が今回のスクリプトです。
第1引数 : 要素のID名
第2引数 : アニメーション開始時の横幅(px単位)
第3引数 : アニメーション終了時の横幅(px単位)
第4引数 : 10ミリ秒あたりの変化量(px単位)。大きければ速く、小さければ遅くアニメーションします。

使い方はこのようになります。
<input
  type="text"
  id="txt1"
  onfocus="stretchElement('txt1', 200, 400, 8);"
  onblur ="stretchElement('txt1', 400, 200, -8);"
  style="width: 200px;" />

onfocus="stretchElement('txt1', 200, 400, 8);"
が「フォーカスされたら200pxから400pxに伸びる、10ミリ秒あたり8pxの幅で」という意味になります。

onblur ="stretchElement('txt1', 400, 200, -8);"
は「フォーカスを失ったら400pxから200pxに縮む、10ミリ秒あたり8pxの幅で」という意味です。

テキストボックス以外にも適用できます。
たとえば
<input type="button"
  id="btn1"
  onmouseover="stretchElement('btn1', 200, 600, 24);"
  onmouseout ="stretchElement('btn1', 600, 200, -24);"
  style="width: 200px;" value="伸縮するボタン" />
と書けば、マウスポインターを重ねるたびに伸びたり縮んだりするボタンができます。


改善の余地はありますが、ホームページのソースをHTML5に置き換える作業をしていて何となく思いついたので書いてみました。

以上、参考になれば幸いです。

0 件のコメント:

コメントを投稿