JavaScript Market - 動きのあるホームページを作る為の各種JavaScript のサンプルと小技集を公開中

JavaScript

JavaScriptって…？ | JavaScript応用のツボ | ブラウザについて | JavaScript Market 利用規程 | JavaScript 各種サンプル | JavaScript 小技集

徐々に大きくなるタイトル文字列

タイトルなどの文字列を、徐々にサイズを大きくしながら表示します。
Netscape4シリーズにも対応できますが、機能が制限される上、複雑になる為良い事は有りません。

■ このスクリプトのソース（Netscape4シリーズ未対応） 
<style>
/* 文字列のスタイルはココで設定 */
#title { color:aqua; font-family:Tahoma; font-weight:bold; }
</style>
　：
<script>
/* 文字列 */
str = "JavaScript Market";

/* 文字列の位置（横方向：left, center, right） */
align = "center";

/* 文字列の位置（縦方向：top, middle, bottom） */
valign = "middle";

/* 開始文字サイズ */
start = 1;   // 1以上とする

/* 修了文字サイズ */
end = 60;

/* 文字サイズの変更ピッチ */
pich = 2;

/* 文字サイズの変更スピード */
speed = 10;

var sc;
function size_change(n) {
   if (! n) {
      sz = start;
      clearTimeout(sc);
   }
   else sz += pich
   if (sz > end) sz = end;
   if (document.all)
      obj = document.all("title");
   else if (document.getElementById)
      obj = document.getElementById("title");
   else return;
   if (! n) {
      obj.innerHTML = str;
      obj.style.textAlign = align;
      obj.style.verticalAlign = valign;
   }
   obj.style.fontSize = sz + "pt";
   if (sz < end)
      sc = setTimeout("size_change(1)",speed);
}
</script>
　：
<body onLoad="size_change()">
<table width=750 height=120 bgcolor=black>
<td id=title><br></td>
</table>
</body>

- 応用 -
Netscape4シリーズに対応させる例

<style>
#title {
   position:relative; width:750; height:120;
   color:aqua; font-family:Tahoma; font-weight:bold;
}
</style>
　：
<script>
/* 文字列 */
str = "JavaScript Market";

/* 文字列の位置（横方向：left, center, right） */
align = "center";

/* 開始文字サイズ */
start = 1;   // 1以上とする

/* 修了文字サイズ */
end = 60;

/* 文字サイズの変更ピッチ */
pich = 2;

/* 文字サイズの変更スピード */
speed = 10;

///// 以下Netscape用 /////
/* 文字色 */
col = "aqua";

/* 文字太さ */
weight = "bold";

var sc;
function size_change(n) {
   if (! n) {
      sz = start;
      clearTimeout(sc);
   }
   else sz += pich
   if (sz > end) sz = end;
   if (document.layers) {
      with (document.layers["title"].document.layers[0].document) {
         open()
         write("<div style='text-align:",align,";font-weight:",weight
              ,";font-size:",sz,"pt;color:",col,";'>",str,"</div>");
         close();
      }
   }
   else {
      if (document.all)
         obj = document.all("title");
      else if (document.getElementById)
         obj = document.getElementById("title");
      if (! n) {
         obj.innerHTML = str;
         obj.style.textAlign = align;
      }
      obj.style.fontSize = sz + "pt";
   }
   if (sz < end)
      sc = setTimeout("size_change(1)",speed);
}
</script>
　：
<body onLoad="size_change()">
<table border=0 cellpadding=0 cellspacing=0 bgcolor=black>
<td width=750 height=120 align=center valign=top>
<div id=title>
<layer width=750 height=120><br></layer>
</div>
</td></table>
</body>

suepon.com | CGI作成・CGI制作 | ドメイン検索 | バナー自動作成 | Google Dance jp | 松浦亜弥 (H.P.memo) | パソコン | ネイル