<html><head><title>笔墨跟随鼠标</title><style type="text/css"><!--body{background-color:#004593;}.spanstyle{color:#fff000;font-family:"Courier New";font-size:18px;font-weight:bold;position:absolute; / 绝对定位 /top:-50px;}--></style><script language="javascript">var x,y; //鼠标当前在页面上的位置var step=10; //字符显示间距，为了好看，step=0则字符显示没有间距var flag=0;var message="Cascading Style Sheet"; //跟随鼠标要显示的字符串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) { //如果是IEfor (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(),时候刷新显示字符串的位置。 
上一篇
