javascript鼠标跟随器.docVIP

Javascript鼠标跟随器 设 计 说 明 编写人：王静 编写时间：2012-6-17 一 引言 - 3 - 二 目的 - 3 - 三 工具/原料 - 3 - 四 步骤/方法 - 3 - 一 定义颜色数组 - 3 - 二 初始化参数 - 3 - 四 定义鼠标事件 - 4 - 五 控制鼠标位置和明亮程度 - 5 - 六 计算圆环中心的位置 - 6 - 摘要 如果有一种跟随鼠标移动的文字并能带有缓冲的效果，将会给网页带来一种新鲜的感觉。本节给出了一个跟随鼠标的文的例子，这些文字跟着鼠标移动并具有游走的效果。　　本节代码主要使用了鼠标的 onMouseMove 事件、setTimeout函数和 clearTimeout 函数。 一 引言 二 目的 实现在鼠标在网页上移动时，有一行文字、一张图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟着鼠标不放。 三 工具/原料 Adobe Dreamweaver CS + IE 四 步骤/方法 一 定义颜色数组 colours=new Array(ff0000,654321,ff00ff,333333,ff00ff,111111); amount=colours.length; // 将数组长度保存在变量amount中 Ydelay=0,Xdelay=0; // 设置圆环中心的位置 step=0.2; currStep=0; my=0,mx=0; // 记录当前鼠标的位置 // 向容器中写入.字符（闪烁的星星即是从.变化而来的） for (i=0; i amount; i++) document.write(div id = iestars style = position:absolute; top:0px; left:0px; height:50px; width:50px; color: + colours[i] + ;padding-top:15px;text-align:center../div); brightness = 1; // 初始化亮度的值 gstep = 1; // 每次亮度变化的值 function iMouse(){ my = event.y; mx = event.x; } document.onmousemove = iMouse; //使星星变暗() function dark(){ brightness -= gstep; dt=setTimeout(dark(),10); if (brightness 2){ clearTimeout(dt); glow(); } } // 使星星变亮 function glow(){ brightness += gstep; gt=setTimeout(glow(),10); if (brightness 14){ clearTimeout(gt); dark(); } } 五 控制鼠标位置和明亮程度 function stars(){ ie.style.top = document.body.scrollTop; for(i = 0;i amount;i++){ var style = iestars[i].style; //访问每个容器的style属性 // glow过滤器的作用是在物体周围加入闪耀边缘，使物体呈现发光的效果 // color用来设置闪烁边缘的颜色，strength用来设置边缘的宽度 style.filter = glow(color= + colours[i] + ,strength=+brightness + ); style.top = Ydelay+80*Math.sin(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //竖直位置 style.left = Xdelay+80*Math.cos(currStep/2+i*3.1416/3)*Math.sin((currStep)/10); //水平位置 } currStep += step; } function delay(){ Ydelay += (my-Ydelay)*1/20; Xdelay += (mx-Xdelay)*1/20; stars(); setTimeout(delay(),10); } I