当前位置:萝卜系统下载站 > 技术开发教程 > 详细页面

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

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

更新时间:2023-06-21 文章作者:未知 信息来源:网络 阅读次数:

编程(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代码下载

 


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

温馨提示:喜欢本站的话,请收藏一下本站!

本类教程下载

系统下载排行

网站地图xml | 网站地图html