围绕鼠标的文本JS代码如何写|萝卜系统

编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。

【实例名称】

围绕鼠标的文本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;                    
//设置要显示的字符的x,y坐标
 else x=cx-25+i*10;
 var y=cy-20+Math.floor(Math.random()*40);
//实现随机值的获取
 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);                   
//设置字符的字体-从达到小,从小到大
 if(s>=200)s-=100;
 else if(s>90&&s<=100)
  {
  s-=85;
  clearInterval(val);
  if(i<5)val=setInterval("show("+(i+1)+")",20);
//循环的显示下一个字符
  } 
 fontSize=s;
 }
}
function start()
{ 
    for(i=1;i<=5;i++)
 {
     val=setInterval("show(1)",20);　　　　　　　　　　　　　　　　
//循环执行
     setInterval("follow("+i+")",100);　　　　　　　　　　　     　
//循环执行　　
 }
} 
</SCRIPT>
<SCRIPT language=javascript>
 var word=new Array(5);
 word[1]="欢";word[2]="迎";word[3]="您";word[4]="光";word[5]="临";  
//设置要围绕的字符数组
 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();                                                           
//开始执行围绕操作
 </SCRIPT>
</head>
<body>
</body>
</html>

【运行效果】

运行效果

【难点剖析】

本例中围绕鼠标的文字颜色是固定的，位置和字体是不断变化的。通过数组“word”保存要显示的文字，然后用“show”方法逐个显示数组中的文本，“follow”方法用来设置这些文字的随机位置。

【源码下载】

本实例JS代码下载

使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。

……

标签:围绕鼠标的文本JS代码如何写