急，在线等！跪求JS字体（效果是文字跟随鼠标）颜色不一问题

请看以下是我的JS代码，效果就是：一堆字---“文字跟随鼠标”想要每个字显示不同的颜色，比如第一个“文‘---红色；
第二个”字“--蓝色，等等，请教大虾 如何改，时间紧迫 谢谢！！！！：
<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">
<!--
body{
background-color:#FFFFFF;
}
.spanstyle{
color:Red; /* 显示的字体颜色*/
font-family:"Courier New";
font-size:18px;
text-decoration:overline underline;
font-weight:bold;
position:absolute; /* 绝对定位 */
top:-50px;
}
-->
</style>
<script language="javascript">var x,y; //鼠标当前在页面上的位置
var step=20; //字符显示间距，为了好看，step=0则字符显示没有间距
var flag=0;
var message="文字跟随鼠标"; //跟随鼠标要显示的字符串
message=message.split(""); //将字符串分割为字符数组var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<message.length;i++) {
xpos[i]=-50;
}
var ypos=new Array() //存储每个字符的y位置的数组
for (i=0;i<message.length;i++) {
ypos[i]=-50;
}for (i=0;i<message.length;i++) {  //动态生成显示每个字符span标记,
//使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位
document.write("<span id='span"+i+"' class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}function handlerMM(e){ //从事件得到鼠标光标在页面上的位置
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX;
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY;
flag=1;
}function makesnake() {  //重定位每个字符的位置
if (flag==1 && document.all) { //如果是IE
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;  //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔，
            //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果
ypos[i]=ypos[i-1];  //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动
}
xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标
ypos[0]=y
//上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置
// 该算法显示字符串就有点象人类的游行队伍一样， 

for (i=0; i<=message.length-1; i++) {
var thisspan = eval("span"+(i)+".style");  //妙用eval根据字符串得到该字符串表示的对象
thisspan.posLeft=xpos[i];
thisspan.posTop=ypos[i];
}
}
else if (flag==1 && document.layers) {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];
}
xpos[0]=x+step;
ypos[0]=y;
for (i=0; i<=message.length-1; i++) {
var thisspan = eval("document.span"+i);
thisspan.left=xpos[i];
thisspan.top=ypos[i];
}
}
var timer=setTimeout("makesnake()",10)  //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}
document.onmousemove = handlerMM;
</script>
   </head>
<body onLoad="makesnake();">
</body>
</html>

解决方案 »

  1.   

    只改了下方红色部分代码
    <html> 
    <head> 
    <title>文字跟随鼠标 </title> 
    <style type="text/css"> 
    <!-- 
    body{ 
    background-color:#FFFFFF; 
    } 
    .spanstyle{ 
    color:Red; /* 显示的字体颜色*/ 
    font-family:"Courier New"; 
    font-size:18px; 
    text-decoration:overline underline; 
    font-weight:bold; 
    position:absolute; /* 绝对定位 */ 
    top:-50px; 
    } 
    --> 
    </style> 
    <script language="javascript"> var x,y; //鼠标当前在页面上的位置 
    var step=20; //字符显示间距，为了好看，step=0则字符显示没有间距 
    var flag=0; 
    var message="文字跟随鼠标"; //跟随鼠标要显示的字符串 
    message=message.split(""); //将字符串分割为字符数组 var xpos=new Array() //存储每个字符的x位置的数组 
    for (i=0;i <message.length;i++) { 
    xpos[i]=-50; 
    } 
    var ypos=new Array() //存储每个字符的y位置的数组 
    for (i=0;i <message.length;i++) { 
    ypos[i]=-50; 
    } 
    var colors = ["0000ff","00ff00","ff0000","00ffff","ff00ff","ffff00"];
    for (i=0;i <message.length;i++) {  //动态生成显示每个字符span标记, 
    //使用span来标记字符，是为了方便使用CSS，并可以自由的绝对定位 
    document.write(" <span id='span"+i+"' style='color:#"+colors[i]+"' class='spanstyle'>"); 
    document.write(message[i]); 
    document.write(" </span>"); 
    } if (document.layers){ 
    document.captureEvents(Event.MOUSEMOVE); 
    } function handlerMM(e){ //从事件得到鼠标光标在页面上的位置 
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX; 
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY; 
    flag=1; 
    } function makesnake() {  //重定位每个字符的位置 
    if (flag==1 && document.all) { //如果是IE 
    for (i=message.length-1; i>=1; i--) { 
    xpos[i]=xpos[i-1]+step;  //从尾向头确定字符的位置，每个字符为前一个字符“历史”水平坐标+step间隔， 
                //这样随着光标移动事件，就能得到一个动态的波浪状的显示效果 
    ypos[i]=ypos[i-1];  //垂直坐标为前一字符的历史“垂直”坐标，后一个字符跟踪前一个字符运动 
    } 
    xpos[0]=x+step //第一个字符的坐标位置紧跟鼠标光标 
    ypos[0]=y 
    //上面的算法将保证，如果鼠标光标移动到新位置，则连续调用makenake将会使这些字符一个接一个的移动的新位置 
    // 该算法显示字符串就有点象人类的游行队伍一样， for (i=0; i <=message.length-1; i++) { 
    var thisspan = eval("span"+(i)+".style");  //妙用eval根据字符串得到该字符串表示的对象 
    thisspan.posLeft=xpos[i]; 
    thisspan.posTop=ypos[i]; 
    } 
    } 
    else if (flag==1 && document.layers) { 
    for (i=message.length-1; i>=1; i--) { 
    xpos[i]=xpos[i-1]+step; 
    ypos[i]=ypos[i-1]; 
    } 
    xpos[0]=x+step; 
    ypos[0]=y; 
    for (i=0; i <=message.length-1; i++) { 
    var thisspan = eval("document.span"+i); 
    thisspan.left=xpos[i]; 
    thisspan.top=ypos[i]; 
    } 
    } 
    var timer=setTimeout("makesnake()",10)  //设置10毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。 
    } 
    document.onmousemove = handlerMM; 
    </script> 
      </head> 
    <body onLoad="makesnake();"> 
    </body> 
    </html>