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

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

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

Mtk's Blog

2013年11月23日土曜日

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

0 件のコメント:

コメントを投稿