网站“眼睛”跟着鼠标走
技术与开发
最近老夏在265网站上看到一个非常有趣的功能：网站LOGO上有双会动的眼珠，自己鼠标向什么方向移动，眼珠就跟随鼠标的方向动。老夏想给自己的网站添加这个功能，给访客一个惊喜。老夏模仿制作了半天，也没有成功。
要模仿设计一个“眼”随“鼠”动的功能并不难，方法如下：先要准备三张GIF图片，一张背景LOGO图片、一张眼珠图片和一张遮照图，然后需要编写代码判断鼠标的位置，并根据鼠标的位置相应地移动眼珠，形成眼珠跟着鼠标走的感觉。利用这种跟随原理，我们还可以赋予图片或广告条跟随鼠标移动的功能。
添加图片ID
判断出鼠标位置后，要将位置信息反馈给LOGO上的眼珠，因此要给图片添加ID，方便调用。用记事本打开网页的源文件，在〈body>〈/body>区间找到LOGO代码，进行如下修改：
〈H1 id=Logo265〉〈A href="http://www.rgjy.net/"〉〈IMG id=logoimg alt="" src="images/logo265.gif" border=0〉〈/A〉〈/H1〉/*H1和IMG的ID可自行修改，但需要跟下面代码一致*/
让LOGO中的眼珠动起来
在页面〈head〉〈/head〉区添加眼珠跟随鼠标一起移动的代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
〈SCRIPT type=text/javascript〉
function EYES_init（）/*初始化函数*/
{
var a = Mb（"Logo265"）， b = Nb（a， "a"）;/*获取LOGO*/
Eb = Nb（a， "img"）;
if （ - 1 == Eb.src.indexOf（Fb））
{
return
}
Y = U（"img"）;
Z = U（"img"）;
$ = U（"img"）;
Y.border = （Z.border = （$.border = 0））; /*设置边框*/
Y.src = "images/eyeballmask.gif";/*设置遮照图片位置*/
Z.src = （$.src = "images/pupil265.gif"）;/*设置眼珠图片位置*/
Jb（）;
m（Y[r]， m（Z[r]， m（$[r]， "absolute"）））;/*设置图片为相对位置*/
ca（Y[r]， 90）;
ca（Z[r]， ca（$[r]， 100））;
b.appendChild（Y）;
b.appendChild（Z）;
b.appendChild（$）;
document.onmousemove = Ib; /*鼠标移动，调用函数Ib*/
T（window， "pageshow"， Jb）;
T（window， "resize"， Jb）
}
function Jb（）
{
var a = Ob（Eb）;
mb = a.x;
nb = a.y;
ob = Eb.width;
pb = Eb[p];
var b = "px";
o（Y[r]， mb + qb + b）;
Y[r].top = nb + rb + b;
o（Z[r]， a.x + wb + b）;
Z[r].top = a.y + xb + b;
o（$[r]， a.x + yb + b）;
$[r].top = a.y + zb + b
}
function Ob（a）
{
var b = a.offsetLeft， c = a.offsetTop;
if （a.offsetParent != null）
{
var d = Ob（a.offsetParent）;
b += d.x;
c += d.y;
}
return{x:b，y:c}
}
function T（a， b， c）
{
var d = "on" + b;
if （a.addEventListener）
{
a.addEventListener（b， c， false）
}
else if （a.attachEvent）
{
a.attachEvent（d， c）
}
else
{
var g = a[d];
a[d] = function（）
{
var e = g.apply（this， arguments）， f = c.apply（this， arguments）;
return e == undefined ? f : （f == undefined ? e : f && e）
经过上面设置， LOGO的眼珠就可以跟随鼠标一起移动了。
编后
这种眼珠跟着鼠标走的效果，只是一种噱头，实用性不强。其实我们可以制作图片的鼠标跟随效果，例如鼠标向右偏多少，就显示下一张图片，向左移动就显示上一张图片。