當(dāng)前位置：軟件學(xué)堂 > 資訊首頁(yè) > 網(wǎng)絡(luò)編程 > 編程其他 > 跟隨鼠標(biāo)的文字代碼

跟隨鼠標(biāo)的文字代碼

2012/10/23 18:19:01作者：佚名來(lái)源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

跟隨鼠標(biāo)的文字

【實(shí)例描述】

這是最常見的文本特效，不管鼠標(biāo)移動(dòng)到什么地方，都有一段文字跟隨其后。本例將學(xué)習(xí)此特效的制作。

【實(shí)例代碼】

 <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="我就追隨鼠標(biāo)。";
message=message.split("");   //將文本切割成數(shù)組
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)
{
//判斷瀏覽器，同時(shí)獲取鼠標(biāo)的坐標(biāo)
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坐標(biāo)距離鼠標(biāo)x坐標(biāo)的距離
ypos[0]=y;  //文本和鼠標(biāo)的y坐標(biāo)相同
//設(shè)置包裝文本的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);}
//顯示文本的重點(diǎn)
for (i=0;i<=message.length-1;i++)
 {
document.write("<span id='span"+i+"'class='spanstyle'>");
document.write(message[i]);
document.write("</span>");
}
//針對(duì)navigater瀏覽器時(shí)的情況
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = handlerMM; //將方法綁定到鼠標(biāo)的移動(dòng)事件
</script>
需要在body的加載事件中，調(diào)用上面的方法，代碼如下所示：
<body onLoad="makesnake()">

 

【運(yùn)行效果】

運(yùn)行效果

【難點(diǎn)剖析】

本例的難點(diǎn)是如何獲取鼠標(biāo)的（x,y）坐標(biāo)，如何設(shè)置文字的坐標(biāo)跟隨鼠標(biāo)的坐標(biāo)。移動(dòng)時(shí)的文字的延遲通過“setTimeout”定時(shí)器解決。

【源碼下載】

本實(shí)例JS代碼下載

 

標(biāo)簽： 鼠標(biāo)  文字代碼