用Javascript制作鼠标移动跟随

2024年4月16日发(作者：)

用Javascript制作鼠标移动跟随

冯永曜 黄山村夫

我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小

动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效

果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现

的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。

程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或

文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那

图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、

动画或文字随鼠移动的目的了。

一、一个简单的图片、动画或文字随鼠标移动的例子

制作方法：

1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图

片。

2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；

“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其

在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可

把代码复制到标记的后面：

3、在与之间加上这样一段程序：