本实例演示如何在网页上输出跟随鼠标的文本，并且这些文本会不停地在鼠标周围跳动。
首先创建一个数组，在数组中存储了跟随鼠标的文本，并且根据数组中字符的数目创建相应个数的DIV图层，图层的id分别为word加上该字符在数组中的索引，代码如下：
var word=new Array(6);
word[1]="H";word[2]="e";word[3]="l";word[4]="l";word[5]="o";word[6]="!";
for(i=1;i<=word.length-1;i++)
{
document.write("<DIV id='word"+i+"' style='width:20px;height:20px;"+
"position:absolute;font-size:16;visility:visible'>"+
"<FONT face='Forte' color='#FF0000'>"+word[i]+
"</FONT></DIV>");
}
然后程序调用start函数，它的响应代码如下：
function start()
{
for(i=1;i<=word.length-1;i++)
{
setInterval("follow("+i+")",100);
}
}
在start函数中，通过循环语句中的setInterval函数设置了与word数组中元素个数相同的计时器，每隔一定时间就会调用一次follow函数：
function follow(i)
{
var x;
if(i<4)
x=cx-50+i*10;
else
x=cx-25+i*10;
var y=cy-20+Math.floor(Math.random()*40);
w=eval("word"+i);
with(w.style)
{
left=x.toString()+"px";
top=y.toString()+"px";
}
}
在follow函数中，首先取得与参数i相对应图层的style属性，并且设置该图层的位置。
<HTML>
<HEAD>
<META name="GENERATOR" content=“Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT language=javascript for=document event=onmousemove>
<!--
document_onmousemove()
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language=javascript>
<!--
var word=new Array(6);
word[1]="H";word[2]="e";word[3]="l";
word[4]="l";word[5]="o";word[6]="!";
for(i=1;i<=word.length-1;i++)
{
document.write("<DIV id='word"+i+"' style='width:20px;height:20px;"+
"position:absolute;font-size:16;visility:visible'>"+
"<FONT face='Forte' color='#FF0000'>"+word[i]+
"</FONT></DIV>");
}
start();
var cx=0;
var cy=0;
var val=0;
function follow(i)
{
var x;
if(i<4)
x=cx-50+i*10;
else
x=cx-25+i*10;
var y=cy-20+Math.floor(Math.random()*40);
w=eval("word"+i);
with(w.style)
{
left=x.toString()+"px";
top=y.toString()+"px";
}
}
function start()
{
for(i=1;i<=word.length-1;i++)
{
setInterval("follow("+i+")",100);
}
}
//-->
</SCRIPT>
<SCRIPT id=clientEventHandlersJS language=javascript>
<!--
function document_onmousemove()
{
cx=window.event.x;
cy=window.event.y;
}
//-->
</SCRIPT>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，结果如图1-17所示。
图1-17 跟随鼠标跳动的文本
E- mail:
本站ICP备案号：
