動く顔文字

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var i = 0;
var str = new Array("(^^ ", "(^^;");

function animation() {
	var n = i++ % str.length;				// 配列番号取得
	document.getElementById("anime").innerHTML = str[n];	// 表示する場所

	setTimeout("animation();", 500);			// 1コマ当たりの表示時間
}
window.onload = animation;
// -->
</script>
</head>
<body>
<p id="anime">(^^;</p>
</body>
</html>

配列に文字を定義しておいてそれを繰り返し表示させることによって、顔文字等をあたかも動いているかのように表示させます。初めに配列内に表示させたい顔文字を記述しておきます。

setTimeout() によって関数 animation が呼ばれるたびに変数 i の値がインクリメントされます。この変数 i の値を表示する配列の数で割ったあまりの値を取得します。これにより配列の一番目から一番最後までの配列番号を繰り返し取得することができますので、配列に当てはめて任意の場所に表示させます。1コマ当たりの表示時間は setTimeout() によって調節してください。

この例では、(^^; を表示させるのに「(^^ 」と「(^^;」を配列に指定してそれを繰り返し表示しています。

顔文字のコマ数が多い場合

<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>サンプル</title>
<script type="text/javascript">
<!--
var i = 0;
var face = new Array(
	"( ^^)             ",
	"( ^^)            (",
	"( ^^)          (･･",
	"( ^^)        (･･  ",
	"(._.)      (･･ )  ",
	"(._.)ﾉ   (･･ )    ",
	"(._.)ﾉ ●~(ﾟoﾟ)   ",
	"(._.)ﾉ ●~(/><)/  ",
	"(._.)ﾉ   ●~(/><)/",
	"(._.)ﾉ     ●~(/><",
	"(._.)ﾉ      ●~(/>",
	"(._.)ﾉ      ☆  ~(",
	"(._.)ﾉ      ★   ~",
	"(._.)ﾉ      ☆    ",
	"(._.)ﾉ      ★    ",
	"(._.)ﾉ      :･    ",
	"(._.)ﾉ            "
);

function animation2() {
	var n = i++ % face.length;
	window.status = face[n];

	setTimeout("animation2();", 100);
}
window.onload = animation2;
// -->
</script>
</head>
<body>
   :
   :
</body>
</html>

※この例のようなスクロールする顔文字の場合、ステータスバーやフォーム以外では空白がうまく表示されない場合があります。