JAVASCRIPT实现网页动态鼠标跟随

<script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

    在网上冲浪时，你是否对某些网页上的可以动态跟随你的鼠标踪迹记忆尤新呢？的确，在网页上实现鼠标跟随，这种互动效果能带给来访者留下深刻的印象。而，现在不少网站通过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）了一个全屏幕的表格，还有跟随鼠标的各层是独立且透明，各位朋友很容易就可以在自己的已经编好的网页上加入鼠标跟随，而不影响原来网页的内容。  <script type="text/javascript"> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

<script type="text/javascript"> </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>