js實作文字跟隨滑鼠移動而移動的方法_javascript技巧

本文實例講述了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程式設計有所幫助。