Java-Script

マウスオンで、ステータスバーメッセージを徐々に表示させる。 　　　　　

Sample

ソース

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var data = "AaBbCcDdEeFfGgHh0123456789";
var done = 1;
function start_shake() {
  magtxt= 'java-Da!! High-Quality Good Java-Script サンプルが２００以上！！
　 す ご い ！！　　＼(^o^)／　(^o^)　＼(^o^)／';

  if (done) {
    done = 0;
    prep_msg_func(magtxt, 2, 1, 0, 2);
  }
}
function shake_out() {
  self.status = 'Mouse OUT.';
  done = 1;
}
function prep_msg_func(magtxt, mv_left, delay, chr_var, max) {
  if (!done) {
    mv_left = mv_left - 1;
    var stat_msg = magtxt.substring(0, chr_var);
    var cur_chr;
    for (cur_chr = chr_var; cur_chr < magtxt.length; cur_chr++) {
      stat_msg += data.charAt(Math.round(Math.random()*data.length));
    }
    window.status = stat_msg;
    var re_run = "prep_msg_func('" + magtxt + "'," + mv_left + "," + delay + "," + chr_var + "," + max + ");"
    var new_chr = chr_var + 1;
    var next_chr = "prep_msg_func('" + magtxt + "'," + max + "," + delay + "," + new_chr + "," + max + ");"
    if(mv_left > 0) {
      setTimeout(re_run, delay);
    }
    else {
      if (chr_var < magtxt.length) {
        setTimeout(next_chr, Math.round(delay*(chr_var+3)/(chr_var+1)));
      }
       else {
         done = 1;
      }
    }
  }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<center>
<a href="#" onMouseOver="start_shake()" onMouseOut="shake_out()">
ここにマウスカーソルを乗せて、下のステータスバーを見てください。</a>
</center>
</BODY>
</HTML>

ワンポイント解説

<a href="#" onMouseOver="start_shake()"　で、マウスがオンした時にメッセージ表示を開始しています。
onMouseOut="shake_out()"　で、マウスがオフした時のメッセージ表示を開始しています。