當前位置：軟件學堂 > 資訊首頁 > 網絡編程 > 編程其他 > 跟隨鼠標的文字代碼

跟隨鼠標的文字代碼

2012/10/23 18:19:01作者：佚名來源：網絡

移動端

【實例名稱】

跟隨鼠標的文字

【實例描述】

這是最常見的文本特效，不管鼠標移動到什么地方，都有一段文字跟隨其后。本例將學習此特效的制作。

【實例代碼】

 <style type="text/css">
.spanstyle {
position:absolute;
visibility:visible;
top:-50px;
font-size:9pt;
color: #000000;
font-weight:bold;}
</style>
<script language="javascript">
var x,y;
var step=20;
var flag=0;
var message="我就追隨鼠標。";
message=message.split("");   //將文本切割成數組
var xpos=new Array();
for (i=0;i<=message.length-1;i++) {xpos[i]=-50;}
var ypos=new Array();
for (i=0;i<=message.length-1;i++) {ypos[i]=-50;}
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)
 {
for (i=message.length-1; i>=1; i--) {
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1];       }
xpos[0]=x+step; //文本的x坐標距離鼠標x坐標的距離
ypos[0]=y;  //文本和鼠標的y坐標相同
//設置包裝文本的span控件的位置
for (i=0; i<message.length-1; i++) {
var thisspan = eval("span"+(i)+".style");
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);}
//顯示文本的重點
for (i=0;i<=message.length-1;i++)
 {
document.write("<span id='span"+i+"'class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
//針對navigater瀏覽器時的情況
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM; //將方法綁定到鼠標的移動事件
</script>
需要在body的加載事件中，調用上面的方法，代碼如下所示：
<body onLoad="makesnake()">

【運行效果】

運行效果

【難點剖析】

本例的難點是如何獲取鼠標的（x,y）坐標，如何設置文字的坐標跟隨鼠標的坐標。移動時的文字的延遲通過“setTimeout”定時器解決。

【源碼下載】

本實例JS代碼下載

標簽：鼠標

上一篇：鼠標移入移出時顏色變化代碼
下一篇：跟隨鼠標的彩色文字代碼

相關文章

熱門軟件/ 推薦游戲/ 手機軟件

資訊分類

Dreamweaver Flash DIV+CSS 編程其他

推薦教程

精品軟件推薦

360安全衛士

訊飛輸入法

欧美一级一极性活片免费观看,欧美一级艳片欧美精品,欧美一级性爱大片,欧美一级囗交视频视频,欧美一级特黄录像视频