本文實例講述了js實作文字跟隨滑鼠移動而移動的方法。分享給大家供大家參考。具體分析如下：
這是一款非常簡單的滑鼠特性程式碼，在網頁中移動滑鼠的時候，後面跟著一串文字跟隨者滑鼠移動
<script><br />
var x,y<br />
var step=18 //這裡是相鄰兩個字之間的間隔<br />
var flag=0<br />
var message="腳本房子 www.jb51.net 歡迎你的光臨!" //這裡放需要顯示的文字<br />
message=message.split("") //將字串分解為陣列<br />
var xpos=new Array() //建立數組，以記錄每個位置的x座標<br />
for (i=0;i<=message.length-1;i ) { //給每個元素先賦一個初始值<br />
xpos[i]=-50<br />
}<br />
var ypos=new Array() //建立數組，以記錄每個位置的y座標<br />
for (i=0;i<=message.length-1;i ) {<br />
ypos[i]=-200<br />
}<br />
function movehandler(e){ //處理滑鼠移動事件<br />
x = (document.layers) ? e.pageX : document.body.scrollLeft event.clientX //依瀏覽器的不同，記錄滑鼠的水平位置<br />
y = (document.layers) ? e.pageY : document.body.scrollTop event.clientY //記錄滑鼠的垂直位置<br />
flag=1 //滑鼠位置已經改變，需要重新計算<br />
}<br />
function makesnake() {<br />
if (flag==1 && document.all) { //如果是IE<br />
for (i=message.length-1; i>=1; i--) { //處理座標佇列<br />
xpos[i]=xpos[i-1] step //將每一座標資料前移一格，加上字元間距<br />
ypos[i]=ypos[i-1]<br />
}<br />
xpos[0]=x step //將新資料寫入座標資料佇列尾部<br />
ypos[0]=y<br />
for (i=0; i<message.length-1; i ) {<br />
var thisspan = eval("span" (i) ".style")// 產生目前操作物件spanx.style<br />
thisspan.posLeft=xpos[i]<br />
thisspan.posTop=ypos[i]<br />
}<br />
}<br />
else if (flag==1 && document.layers) { //如果是NS<br />
for (i=message.length-1; i>=1; i--) { //處理座標佇列<br />
xpos[i]=xpos[i-1] step //將每一座標資料前移一格，加上字元間距<br />
ypos[i]=ypos[i-1]<br />
}<br />
xpos[0]=x step //將新資料寫入座標資料佇列尾部<br />
ypos[0]=y<br />
for (i=0; i<message.length-1; i ) { //根據陣列的資料改變每一個字所在的層的座標<br />
var thisspan = eval("document.span" i) //產生目前操作物件document.spanx<br />
thisspan.left=xpos[i]<br />
thisspan.top=ypos[i]<br />
}<br />
}<br />
var timer=setTimeout("makesnake()",30) //30毫秒後再根據狀況調整各字元位置<br />
}<br />
</script>
<script><br />
<!-- Beginning of JavaScript -<br />
//這裡為每個字產生一個span作為容器<br />
for (i=0;i<=message.length-1;i ) {<br />
document.write("<span id='span" i "' class='spanstyle'>")<br />
document.write(message[i])<br />
document.write("")<br />
}<br />
//規定滑鼠移動事件的處理過程<br />
if (document.layers){<br />
document.captureEvents(Event.MOUSEMOVE);<br />
}<br />
document.onmousemove = movehandler;<br />
// - End of JavaScript - --><br />
</script>
這種效果是不是很酷啊？
希望本文所述對大家的javascript程式設計有所幫助。
