當前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > 圍繞鼠標的文本JS代碼怎么寫

圍繞鼠標的文本JS代碼怎么寫

2012/10/24 10:47:18作者：佚名來源：網(wǎng)絡(luò)

移動端

【實例名稱】

圍繞鼠標的文本JS代碼

【實例描述】

文本可以跟隨鼠標，也可以圍繞著鼠標閃動。本例將演示如何讓指定的文本，一直圍繞著鼠標閃動。

【實例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標題頁</title>
<SCRIPT language=javascript>
var cx=0;
var cy=0;
var val=0;
function location()
{ cx=window.event.x;                      
//獲取鼠標的x坐標
 cy=window.event.y;　　　　　　　　　　　
//獲取鼠標的y坐標
}
document.onmousemove=location;　　　　　　　
//綁定鼠標的移動事件
function follow(i)
{ var x;
 if(i<4)x=cx-50+i*10;                    
//設(shè)置要顯示的字符的x,y坐標
 else x=cx-25+i*10;
 var y=cy-20+Math.floor(Math.random()*40);
//實現(xiàn)隨機值的獲取
 w=eval("word"+i);                        
//獲取要顯示的字符
 with(w.style)
 {
 left=x.toString()+"px";                  
//在指定的位置顯示字符
 top=y.toString()+"px";
 }
}
function show(i)
{ 
 var w=eval("word"+i);                   
//獲取要顯示的字符
 with(w.style)
 {
 visibility="visible";
 s=parseInt(fontSize);                   
//設(shè)置字符的字體-從達到小,從小到大
 if(s>=200)s-=100;
 else if(s>90&&s<=100)
  {
  s-=85;
  clearInterval(val);
  if(i<5)val=setInterval("show("+(i+1)+")",20);
//循環(huán)的顯示下一個字符
  } 
 fontSize=s;
 }
}
function start()
{ 
    for(i=1;i<=5;i++)
 {
     val=setInterval("show(1)",20);　　　　　　　　　　　　　　　　
//循環(huán)執(zhí)行
     setInterval("follow("+i+")",100);　　　　　　　　　　　     　
//循環(huán)執(zhí)行　　
 }
} 
</SCRIPT>
<SCRIPT language=javascript>
 var word=new Array(5);
 word[1]="歡";word[2]="迎";word[3]="您";word[4]="光";word[5]="臨";  
//設(shè)置要圍繞的字符數(shù)組
 for(i=1;i<=5;i++)
  document.write("<div id='word"+i+"' style='width:20px;
height:20px;position:absolute;font-size:1000;visibility:hidden'>
<font face='Forte' color='#cc9966'>"+word[i]+"</font></div>");
 start();                                                           
//開始執(zhí)行圍繞操作
 </SCRIPT>
</head>
<body>
</body>
</html>

【運行效果】

運行效果

【難點剖析】

  本例中圍繞鼠標的文字顏色是固定的，位置和字體是不斷變化的。通過數(shù)組“word”保存要顯示的文字，然后用“show”方法逐個顯示數(shù)組中的文本，“follow”方法用來設(shè)置這些文字的隨機位置。

【源碼下載】

本實例JS代碼下載

 

標簽： 鼠標  JS代碼