IE瀏覽器下的JS滑鼠特效（文字跟隨滑鼠環繞的特效）
阿新 • • 發佈：2019-01-27
前些天看一些特效介紹的時候，有看到這個就照著做了這個滑鼠環繞文字的特效，目前只能在IE下實現效果。
將它分享給大家。希望對大家的學習有幫助，如果有什麼問題，歡迎指正。希望和大家多交流，共同進步。
-- 只支援IE瀏覽器 --
<BODY bgcolor="#fef4d2"> <!-- 程式碼開始 --> <script language=JavaScript> var cx=0;//滑鼠當前座標值 var cy=0;//滑鼠當前座標值 for(i=1;i<=7;i++) { setInterval("MouseTextfollow("+i+")",100); //呼叫跟隨函式 } function MouseTextfollow(i)//文字跟隨滑鼠 { var x; if(i<6)//文字1~5顯示在滑鼠的左邊 x=cx-70+i*10;//橫座標為滑鼠當前座標左邊向右按標號以十畫素為間隔依次排列 else //文字6~7顯示在滑鼠的右邊 x=cx-35+i*10;//滑鼠當前座標右方加25~35畫素//減去值越大距離滑鼠越進 var y=cy-10+Math.floor(Math.random()*40);//滑鼠當前縱座標減十加四十也就是從負十到正三十不等，負十加上自身高度一半，則中心點約為-20到20，正好上下浮動高度範圍相同 w=eval("MouseText"+i); with(w.style) //給得到的這個物件設定樣式 { left=x.toString()+"px"; top=y.toString()+"px"; } } function MouseTextLocation()//獲取當前的滑鼠座標 { cx=window.event.x; cy=window.event.y; } document.onmousemove=MouseTextLocation;//onmousemove 事件會在滑鼠指標移出指定的物件時發生。 <!-- 在此能夠更改文字的總數目 --> var MouseText=new Array(7); <!-- 這裡可以按序增加文字資訊 --> MouseText[1]="♥"; MouseText[2]="♥"; MouseText[3]="♥"; MouseText[4]="♥"; MouseText[5]="♥"; MouseText[6]="♥"; MouseText[7]="♥"; <!-- 在此能夠更改文字的顏色 --> for(i=1;i<=7;i++) document.write("<div id='MouseText"+i+"' style='width:20px; height:20px; position:absolute; font-size:95;'><font face='Forte' color='#FF0000'>"+MouseText[i]+"</font></div>");//迴圈輸出包含text的div MouseTextStart(); </script> <!-- 程式碼結束 --> </BODY>