用Javascript实现鼠标移动跟随.doc

用Javascript实现鼠标移动跟随一、一个简单的图片、动画或文字随鼠标移动的例子制作方法：1、在 Dreamweaver5中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到标记的后面：图、文跟鼠标试验 ，这里的图片和文字可换成你所需要的。3、在与之间加上这样一段程序：只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。4、当然要使真正的效果出现，还得在标记中加上触发事件调用程序，使程序动作起来。在标记中加上代码：onload=move() onmousemove=canmove()，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。二、稍复杂一点的效果在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：1、在与之间插入下面这段程序：!-var x,yvar step=20var can=0var information=欢迎光临！; /在这里写入跟随鼠标移动的文字information=information.split(); /把字符串拆分成单个的文字Il=information.length; /获取字符的个数，存放在Il变量中k=0;var xpos=new Array() /声明一个数组，存放各图层的X位置坐标for (i=0;i=Il-1;i+) /给数组赋初值xposi=-50var ypos=new Array() /声明一个数组，存放各图层的Y位置坐标for (i=0;i=Il-1;i+) /给数组赋初值yposi=-50function canmove() x=document.body.scrollLeft+event.clientX;y=document.body.scrollTop+event.clientY;can=1; k=0;step=20function move() if (can) k+;if (k20) step+;elseif (k=1;i-) /计算各图层在新位置的X、Y坐标xposi=xposi-1+step;yposi=yposi-1xpos0=x+step;ypos0=yfor (i=0;i 2、在标记的后面加上这段程序：!-for (i=0;i=Il-1;i+)document.write(+informationi+);-这段程序的作用是动态自动编写存放移动文字图层的HTML代码，并把相应的文字写在上面。3、在标记中加上代码：onload=move() onmousem