js实现文字跟随鼠标移动而移动的方法
本文实例讲述了js实现文字跟随鼠标移动而移动的方法。分享给大家供大家参考。具体分析如下：
这是一款非常简单的鼠标特性代码，在网页中移动鼠标的时候，后面跟着一串文字跟随者鼠标移动
<html>
<head>
<styletype="text/css">
.spanstyle{
COLOR:000000;FONT-SIZE:10pt;POSITION:absolute;TOP:-50px;VISIBILITY:visible
}
</style>
<script>
varx,y
varstep=18//这里是相邻两个字之间的间隔
varflag=0
varmessage="毛票票www.nhooo.com欢迎你的光临!"//这里放需要显示的文字
message=message.split("")//将字符串分解为数组
varxpos=newArray()//创建数组，以记录每个位置的x坐标
for(i=0;i<=message.length-1;i++){//给每个元素先赋一个初始值
xpos[i]=-50
}
varypos=newArray()//创建数组，以记录每个位置的y坐标
for(i=0;i<=message.length-1;i++){
ypos[i]=-200
}
functionmovehandler(e){//处理鼠标移动事件
x=(document.layers)?e.pageX:document.body.scrollLeft+event.clientX //根据浏览器的不同，记录鼠标的水平位置
y=(document.layers)?e.pageY:document.body.scrollTop+event.clientY //记录鼠标的垂直位置
flag=1//鼠标位置已经改变，需要重新计算
}
functionmakesnake(){
if(flag==1&&document.all){//如果是IE
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++){
varthisspan=eval("span"+(i)+".style")//生成当前操作对象spanx.style
thisspan.posLeft=xpos[i]
thisspan.posTop=ypos[i]
}
}
elseif(flag==1&&document.layers){//如果是NS
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++){//根据数组的数据改变每一个字所在的层的坐标
varthisspan=eval("document.span"+i)//生成当前操作对象document.spanx
thisspan.left=xpos[i]
thisspan.top=ypos[i]
}
}
vartimer=setTimeout("makesnake()",30)//30毫秒后再次根据情况调整各字符位置
}
</script>
</head>
<bodybgcolor="ffffff"onload="makesnake()">
<script>
<!--BeginningofJavaScript-
//这里为每个字生成一个span作为容器
for(i=0;i<=message.length-1;i++){
document.write("<spanid='span"+i+"'class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}
//规定鼠标移动事件的处理过程
if(document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove=movehandler;
//-EndofJavaScript--->
</script>
</body>
<br><b>这种效果是不是很酷啊？</b></br>
</html>
希望本文所述对大家的javascript程序设计有所帮助。