| コード |
<![CDATA[
<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>
]]>
|
マウスが移動したら文字がマウス方向に収束する