您的位置：首页 > Web前端 > JavaScript

javascript文字随鼠标移动

2012-09-13 14:40 148 查看

body{

background-color:#004593;

}

.spanstyle{

color:#fff000;

font-family:"Courier New";

font-size:13px;

font-weight:bold;

position:absolute;

top:-50;

}

<script type="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){     //如果是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>

<body onLoad="makesnake();">

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript function 存储 timer class 算法

相关文章推荐

新的分享

章节导航