WEB开发网
开发学院网页设计JavaScript javascript:一个鼠标动态跟随文字特效的示例 阅读

javascript:一个鼠标动态跟随文字特效的示例

 2007-11-27 17:49:56 来源:WEB开发网   
核心提示:这是去年我学习JavaScript时写的一个代码,里面有比较详细的注释,javascript:一个鼠标动态跟随文字特效的示例,我个人以为是一个学习javascript和鼠标事件的好例子,// ** 源代码 <html><head><meta http-equiv=Conten

这是去年我学习JavaScript时写的一个代码,里面有比较详细的注释。我个人以为是一个学习javascript和鼠标事件的好例子。

// **************************   源代码  ************************

<html>

<head>
<meta http-equiv=Content-Language content=zh-cn>
<meta http-equiv=Content-Type content=text/html; charset=gb2312>
<meta name=GENERATOR content=Microsoft FrontPage 4.0>
<meta name=ProgId content=FrontPage.Editor.Document>
<title>New Page 1</title>

<STYLE>.spanstyle {
 COLOR: yellow; FONT-FAMILY: Verdana; FONT-SIZE: 10pt; FONT-WEIGHT: bold; POSITION: absolute; TOP: -50px; VISIBILITY: visible
}
</STYLE>

<SCRIPT>

var x,y  //鼠标当前在页面上的位置
var step=20 //字符显示间距,为了好看,step=0则字符显示没有间距,视觉效果差
var flag=0

var message=Welcome  //跟随鼠标要显示的字符串
message=message.split() //将字符串分割为字符数组

var xpos=new Array() //存储每个字符的x位置的数组
for (i=0;i<=message.length-1;i++) {
 xpos[i]=-50
}

var ypos=new Array()   //存储每个字符的y位置的数组
for (i=0;i<=message.length-1;i++) {
 ypos[i]=-50
}

for (i=0;i<=message.length-1;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(),30) //设置30毫秒的定时器来连续调用makesnake(),时刻刷新显示字符串的位置。
}

document.onmousemove = handlerMM;

</SCRIPT>

</head>

<body bgColor=#000000 onload=makesnake()>

<p><font color=#FFFFFF>一个鼠标动态跟随文字特效的示例</font></p>

</body>

</html>

Tags:avascript 一个 鼠标

编辑录入:coldstar [复制链接] [打 印]
赞助商链接