鼠标文字跟随

来源：互联网发布：数据库怎么解决高并发编辑：程序博客网时间：2024/05/22 13:26

<html>
<head>
<title>文字跟随鼠标</title>
<style type="text/css">

</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;
}