在网上冲浪时，你是否对某些网页上的可以动态跟随你的鼠标踪迹记忆尤新呢？的确，在网页上实现鼠标跟随，这种互动效果能带给来访者留下深刻的印象。而，现在不少网站通过FLASH来实现这个效果，但因为IE和NC都要安装插件才能观看，于是就有了相当的局限性。用JAVASCRIPT实现该效果，就有天然的优势了——浏览器自动识别。下文将讲述如何用JAVASCRIPT实现鼠标跟随。 

程序的主要思路是把跟随鼠标的6个小点放在6个透明的层上，然后通过一个 TIMER，定时通过document.captureEvents(Event.MOUSEMOVE)函数获得鼠标的X，Y 坐标，然后计算和重画6个层，从而实现6个彩色小点跟随着鼠标。 


 < html >
< head >
 < title >Mouse trace< /title >
  < script LANGUAGE="JavaScript" >
< !--
function Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,
yybilder,yyloop,yyto,yycnt,yystep) 
  {// 设置重绘层的Layerfx函数
 if ((document.layers)||(document.all)){
with (Math) {yynextx= eval(yyfnx)}
with (Math) {yynexty= eval(yyfny)}
yycnt=(yyloop && yycnt >
 =yystep*yybilder)?0:yycnt+yystep;
 if (document.layers){//针对NC浏览器定义层的坐标
eval(yydiv+".top="+(yynexty+yytop))
eval(yydiv+".left="+(yynextx+yyleft))
  }
 if (document.all){//针对IE浏览器定义层的坐标
eval("yydiv=yydiv.replace(/.layers/gi, '.all')");
eval(yydiv+".style.pixelTop="+(yynexty+yytop));
eval(yydiv+".style.pixelLeft="+(yynextx+yyleft));
  }
 argStr='Layerfx('+yyleft+','+yytop+',"'+yyfnx+'",
"'+yyfny+'","'+yydiv+'",'+yybilder+','+yyloop+',
'+yyto+','+yycnt+','+yystep+')';
 if (yycnt< =yystep*yybilder)
  {
 eval(yydiv+".yyto=setTimeout(argStr,yyto)");}
//加入时间控制
  }

  }
 function Mousetrace(evnt)
{ 
 if (yyns4) //针对NC浏览器，根据鼠标位置，
获得层新的X，Y坐标
  {if (evnt.pageX) {ml=evnt.pageX;  mt=evnt.pageY;}  }
 else{ //针对IE浏览器，根据鼠标位置，
获得层新的X，Y坐标
 ml=(event.clientX + document.body.scrollLeft);
 mt=(event.clientY + document.body.scrollTop);
  }
 if (tracescript)eval(tracescript)
 }
//-- >
< /script >

< body bgcolor="#FFFFFF" >
 < div align="center" >< center >
  < table border="0" cellpadding="0" 
cellspacing="0" width="100%" >
  < /table > 
//作一个全屏幕的表格作为触发ONMOUSEOVER的对象
 < /center >< /div >
 < div align="center" >< /div >

< div id="yyd0"
  //画出6个3X3的不同颜色的层
，就是6个彩色小点
  style="position:absolute; left:10px; 
top:50px; width:3px; height:3px; z-index:1;
 background-color: #33bbaa; 
 clip: rect(0 3 3 0)" >< /div >< div
  id="yyd1"
  style="position:absolute; left:20px; top:50px; 
width:3px; height:3px; z-index:1; background-color:
 #ff2022;  clip: rect(0 3 3 0)" >< /div >< div
  id="yyd2"
  style="position:absolute; left:30px; top:50px;
 width:3px; height:3px; z-index:1; background-color: 
#cc3399;  clip: rect(0 3 3 0)" >< /div >< div
  id="yyd3"
  style="position:absolute; left:40px; top:50px; 
width:3px; height:3px; z-index:1; background-color:
 #ffff00;  clip: rect(0 3 3 0)" >< /div >< div
  id="yyd4"
  style="position:absolute; left:50px; top:50px; 
width:3px; height:3px; z-index:1; background-color: 
#3366cc;  clip: rect(0 3 3 0)" >< /div >< div
  id="yyd5"
  style="position:absolute; left:60px; top:50px; 
width:3px; height:3px; z-index:1; background-color:
 #5add55;  clip: rect(0 3 3 0)" >< /div >
< script >
var yyns4=window.Event?true:false; var mt = 0; var ml = 0; 
 document.onmousemove = Mousetrace;
 tracescript = '';
 if (yyns4){ document.captureEvents(Event.MOUSEMOVE);
 //获得鼠标移动事件
 Mousetrace('',',document.Mousetrace1')}
 Layerfx(0,0,'ml+cos((15*sin(yycnt/24.
247212049632708))+0)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/36.13878534416527))+0)*
150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd0\']',2000,true,80,0,1);
 Layerfx(0,0,'ml+cos((15*sin(yycnt/
14.259312736364942))+30)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/33.055333176403245))+30)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
'document.layers[\'yyd1\']',2000,true,80,0,1);
 Layerfx(0,0,'ml+cos((15*sin(yycnt/
21.77522790563416))+60)*150*(sin(10+yycnt/20)+0.2)*
cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/38.00715313644094))+60)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd2\']',2000,true,80,0,1);
 Layerfx(0,0,'ml+cos((15*sin
(yycnt/16.94483476520931))+90)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/28.81649093984075))+90)
*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd3\']',2000,true,80,0,1);
 Layerfx(0,0,'ml+cos((15*sin
(yycnt/13.322848843155297))+120)*150
*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/13.743055559979211))
+120)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)','
document.layers[\'yyd4\']',2000,true,80,0,1);
 Layerfx(0,0,'ml+cos((15*sin
(yycnt/31.727090784502128))+150)*150*
(sin(10+yycnt/20)+0.2)*cos(yycnt/20)',
 'mt+sin((15*sin(yycnt/12.66553778007537))
+150)*150*(sin(10+yycnt/20)+0.2)*cos(yycnt/20)'
,'document.layers[\'yyd5\']',2000,true,80,0,1);
 //根据层新的坐标重新画层
 < /script >
  < /body >
 < html >

因为这段MOUSE TRACE源代码是分享（DIV）了一个全屏幕的表格，还有跟随鼠标的各层是独立且透明，各位朋友很容易就可以在自己的已经编好的网页上加入鼠标跟随，而不影响原来网页的内容。