マウスが移動したら文字がマウス方向に収束する

動作ブラウザ
Internet Explorer Netscape Navigator
4.0x 4.5 5.0x 5.5 6.0 4.x 6.0
Windows - × ×
Macintosh - - × ×
UNIX - - - - - × ×

解  説  マウスが移動したら文字がマウス方向に収束するようにするには指定された段落内の文字を1文字ずつ分解しspanタグで1文字ずつスタイルシートを適用します。スタイルシートは表示する座標を指定します。サンプルでは画面内にランダムに表示するようにしています。  文字をマウス方向に移動させるには文字の位置とマウス座標の符号を求めます。マウス座標の方が小さければ-1、同じなら0、大きければ1とします。この値を現在の座標に加算することによりマウスに向かって文字が移動していきます。
コード <html> <head> <title>マウスが移動したら文字がマウス方向に収束する</title> <script language="JavaScript"><!-- count = 0; speed = 2; // 文字の移動速度 function setText(tagName) { text = document.all[tagName].innerText; html = ""; count = text.length; for (i=0; i<text.length; i++) { str = text.charAt(i); x = Math.floor(Math.random()*document.body.clientWidth); y = Math.floor(Math.random()*document.body.clientHeight); html += "<span id='txt"+i+"' style='position:absolute;left:"+x+"px;top:"+y+"px'>" + str + "</span>"; } document.all[tagName].innerHTML = html; } function moveText() { for (i=0; i<count; i++) { tObj = document.all["txt"+i].style; tObj.pixelLeft += sgn(event.x,tObj.pixelLeft) * speed; tObj.pixelTop += sgn(event.y,tObj.pixelTop ) * speed; } } function sgn(n1,n2) { if (n1 == n2) return 0; if (n1 < n2) return -1; else return 1; } // --></script> </head> <body onLoad="setText('myTEXT')" onMousemove="moveText()"> <p id="myTEXT" style="color:black"> マウスが移動したら文字がマウス方向に収束します。<br> </p> </body> </html>

■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View!