| ポイント |
<![CDATA[
for (i=0; i<sText.length; i++)
{
pt = Math.floor(p*i);
n = "0123456789ABCDEF".charAt(pt);
c = "#"+n+n+"0000";
str2 = str2 + "<font color='"+c+"'>" + sText.charAt(i) + "</font>";
}
]]>
|
| 説 明 |
グラデーションのかかった文字列を画面上に出力するためには、あらかじめ出力する位置をdivタグとスタイルシートで指定しておきます。あらかじめ表示する文字列を変数に格納しておき、抜き出す位置を１文字づつずらします。IE4以降では「document.all["オブジェクト名"].innerHTML」でタグを出力し、NN4では「document.open()」「document.write()」、「document.close()」を使ってレイヤーに出力します。タイマーを使って一定時間ごと繰り返しすことで１文字づつ表示されるようになります。この時に表示する文字列を１文字ずつ表示する色を求めます。色指定はHTMLタグのfont（IE4,NN6以上であればスタイルシートでも良い）を使って指定します。 |
| サンプル |
<![CDATA[
<html>
<head>
<title>文字にグラデーションをかけ１文字ずつ出力する</title>
<script Language="JavaScript"><!--
str = "■■■■■■■■■■■■■■■■■■■■■■■■■■";
count = 0;
function setText1()
{
if (count > str.length) return;
count++;
txt = str.substring(0,count);
txt2 = gradTextConv(txt);
if (document.all) document.all["outText"].innerHTML = txt2;
if (document.layers)
{
document.layers["outText"].document.open();
document.layers["outText"].document.write(txt2);
document.layers["outText"].document.close();
}
setTimeout("setText1()",100);
}
function gradTextConv(sText)
{
p = 16 / str.length;
str2 = "";
for (i=0; i<sText.length; i++)
{
pt = Math.floor(p*i);
n = "0123456789ABCDEF".charAt(pt);
c = "#"+n+n+"0000";
str2 = str2 + "<font color='"+c+"'>" + sText.charAt(i) + "</font>";
}
return str2;
}
// --></script>
</head>
<body bgcolor="white">
<a href="javaScript:setText1()">出力開始</a>
<div id="outText" style="position:absolute;top:50px;left:5px;"></div>
</body>
</html>
]]>
|
| 補足説明 |
Netscape 4では日本語など２バイト文字は文字化けします。 |
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!
|
文字にグラデーションをかけ１文字ずつ出力する