JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)

JavaScript:一個滑鼠動態跟隨文字特效的示例 (轉)[@more@]

這是去年我學習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("")
 document.write(message[i])
  document.write("")
}

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;

一個滑鼠動態跟隨文字特效的示例