javascript文字随鼠标移动

最新推荐文章于 2024-09-11 15:33:18 发布

tiannian1220

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量604

点赞数

文章标签： javascript function 存储 timer class 算法

本文链接：https://blog.csdn.net/tiannian1220/article/details/7974955

版权

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.οnmοusemοve=handlerMM;
</script>

<body onLoad="makesnake();">