JAVASCRIPT实现网页动态鼠标跟随

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