当前位置:软件学堂 > 资讯首页 > 网络编程 > 编程其他 > 围绕鼠标的文本JS代码怎么写

围绕鼠标的文本JS代码怎么写

2012/10/24 10:47:18作者:佚名来源:网络

移动端

【实例名称】

围绕鼠标的文本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代码