元ネタは、mixi の ASP.NET コミュにある質問。
複数枚の、動的に生成される画像を、一定時間毎に切り替えて、アニメーションのように表示したい、とのこと。出遅れたので、ここに書いておく。
表示したいところ
<div style="position:relative;">
<p style="position:absolute; top:0; left:0; display:none;" id="p1">あいうえお</p>
<p style="position:absolute; top:0; left:0; display:none;" id="p2">かきくけこ</p>
<p style="position:absolute; top:0; left:0; display:none;" id="p3">さしすせそ</p>
</div>
面倒なので文字列にする。
まず、div で囲む。このとき、style で position を relative にする。こうすることで、この中の要素の absolute 指定が、この要素の座標を基準にすることになる。
表示するものは、まずは display を none にしておく。これで表示されない。そして、id として、同じ文字列に序数をつけたものを指定する。これで、後から検索しやすくなる。
JavaScript
<script language="javascript">
<!--
var cnt = 1;
function parapara() {
for (i = 1; i <= 3; i++) {
var pid = "p" + i;
var cntrl = document.getElementById(pid);
if (cntrl != null) {
if (i == cnt) {
cntrl.style.display = "block";
} else {
cntrl.style.display = "none";
}
}
}
cnt++;
if (cnt > 3) {
cnt = 1;
}
setTimeout(parapara, 1000);
}
setTimeout(parapara, 1000);
// -->
</script>
cnt が、何番目を表示するかを保持する。for 文でぶん回して、片っ端から display を変更していく。このとき、ループの回数と cnt が同じものは block に。違うものは none にする。
cnt をインクリメントして、用意している最大数だったら最小数に戻す。最後にもう一度呼ばれるようにタイムアウトを設定する。
mixi の方には AJAX を利用したり、reload させて．．．という案で進んでいたのですが、そうすると表示を変えるタイミングで通信が発生します。もちろん、セッションを保つという大きな効用もあるのですが、それよりも、セッションが切れないことをセキュリティ リスクと考えました。また、ネットワークに余計な負荷をかけることもないかと思います。
投稿日時 : 2007年7月20日 6:24