Javascript Patchworker - 枠線を徐々に表示

このスクリプトについて
　オブジェクトの周りを線が徐々に取り囲むように表示されます。これはオブジェクトのborder属性を操作するのではなく、テーブルを利用して周囲のオブジェクトのサイズを変更することによって、あたかも枠線が徐々に表示されているかのような効果を与えています。HTMLの部分が少々複雑ですので、初心者はコメントがつけてある中だけを編集するようにしてください。

実行例
こちらをご覧ください。

関連

CSS:枠線を表示　ボックスの大きさを指定

対応ブラウザ
WIN IE 4.0～ NN 6.0～　MAC IE 4.0～ NN 6.0～

サンプルソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>枠線を徐々に表示</title>
<script type="text/javascript">
<!--
//ユーザが設定する変数----------------------------------
  var targetId = new Array ("left", "upper", "right", "bottom");
  //対象の要素のIDを左上右下の順で記述
  var moveTime = 10; //動く早さを設定　大きいほど遅い
  var span = 10; //１回の動作での枠線の表示スピード
  var limit = new Array (100, 600, 100, 600);
  //ボーダーの最大値を左上右下の順に記述
//------------------------------------------------------
  var id; var s; var a = 0;
function border (){
  if(document.getElementById){
    //aが偶数の場合の処理
    if (a%2 == 0){
      document.getElementById(targetId[a]).style.display = "block";
      s = document.getElementById(targetId[a]).style.height;
      l = s.length - 2;
      s = s.substring(0, l);
      for (b=0; b < span; b++){ s++; }
      document.getElementById(targetId[a]).style.height = s + "px";
    }
    //aが奇数の場合の処理
    else {
      s = document.getElementById(targetId[a]).style.width;
      l = s.length - 2;
      s = s.substring(0, l);
      for (b=0; b < span; b++){ s++; }
      document.getElementById(targetId[a]).style.width = s + "px";
    }
    if (s >= limit[a]) a ++;
    if (a == targetId.length) clearInterval(id);
  }
}

id = setInterval (border, moveTime);
//-->
</script>
<style type="text/css">

</style>
</head>
<body>

<h1>罫線が徐々に表示されます</h1>

</td>
</tr>
<tr>
  <td align="right"><div id="bottom"></div></td>
</tr>
</table>

</body>
</html>

ユーザ設定
　ユーザーが設定する変数は、targetId配列、moveTime、span、limit配列です。
　targetId配列には対象とするオブジェクトのIDを左上右下の順に設定してください。通常は編集の必要がありません。またこの値を変更した場合にはCSSのほうにも多少の変更が必要です（インフォメーション参照）
　moveTimeには移動の時間を設定します。数字を小さくするほど速く動きますが、spanを変更しない限り影響は少なめです。
　spanには１回の動作での枠線の表示速度を設定します。数字を大きくするほど速く荒く動きます。
　limit配列には最終的な枠線の長さを左上右下の順で設定してください。通常は左右と上下に同じ値を設定します。

　また、CSSの方ではlimit配列を変更した場合に限り、設定の必要があります。上下と.middleのwidth属性、左右と.right-leftのheight属性が対応していますので、それぞれlimit配列と同じ値を設定してください。
　その他、下の部分を操作することで枠線の色や太さ、スタイルなどを変更できますが、詳しくはボックス関連を参照してください。

JavaScriptのTOPに戻る　　

TOPに戻る