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

2013年11月23日土曜日

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

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

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

これはテキストボックスは通常の大きさです。

このテキストボックスにカーソルをフォーカスすると幅がグイーンと伸びます。

カーソルを移動してフォーカスを失うとアニメーションしながら元の幅に戻ります。

以下ソースです。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8" />
 <title>要素の伸縮アニメーション</title>
 <script type="text/javascript"><!--
 function stretchElement(id, from, to, diff) {
  var txtWidth = from;
  var elem = document.getElementById(id);
  var timer;

  function stretch() {
   if (timer != null) {
    clearTimeout(timer);
   }

   txtWidth += diff;
   elem.style.width = txtWidth + "px";

   var isReflexive = false;
   if (diff > 0 && txtWidth <= to) {
          isReflexive = true;
   } else if (diff < 0 && txtWidth >= to) {
       isReflexive = true;
   }

   if (isReflexive) {
       //再帰呼出し
       timer = setTimeout(arguments.callee, 10);
   } else {
       elem.style.width = to + "px";
   }
  stretch();
 }
 //-->
 </script>
</head>
<body>
 <input
  type="text"
  id="txt1"
  onfocus="stretchElement('txt1', 200, 400,  8);"
  onblur ="stretchElement('txt1', 400, 200, -8);"
  style="width: 200px;" />

 <div style="text-align: center;">
  <input type="button"
   id="btn1"
   onmouseover="stretchElement('btn1', 200, 600,  24);"
   onmouseout ="stretchElement('btn1', 600, 200, -24);"
   style="width: 200px;" value="伸縮するボタン" />
 </div>
</body>
</html>

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="伸縮するボタン" />
と書けば、マウスポインターを重ねるたびに伸びたり縮んだりするボタンができます。