当前页面: 开发资料首页 → Javascript 专题 → JAVASCRIPT实现网页动态鼠标跟随
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）了一个全屏幕的表格，还有跟随鼠标的各层是独立且透明，各位朋友很容易就可以在自己的已经编好的网页上加入鼠标跟随，而不影响原来网页的内容。
↑返回目录
前一篇: 巧用JavaScript记录网站访问次数
后一篇: 自定义右键菜单代码详解（二）