Aug, 2

265那个眼睛怎么实现的

发布:zlbigger | 分类:代码 | 评论:4 | 引用:0 | 浏览:


演示地址：http://www.59seo.com.cn/dmys/265yanjing/yanjing.htm

我在浏览265上网导航时，无意间发现这个网站的LOGO中的眼珠竟然会跟着鼠标移动，效果非常棒，想把这功能移植下来，不知怎么做？

第一眼看到这效果，大多数人可能都会觉得这是用FLASH做的，但再仔细观察，其实只是GIF图片，那GIF图片怎么会出现这种效果呢？原来是有三张GIF图，一张背景LOGO，一张眼珠图片和一张遮照图，然后利用JS代码，判断鼠标的位置，然后移动眼珠，形成眼珠跟着鼠标走的感觉。这种效果应用到自己的网站，只需更换265的LOGO图片即可。
第一步:添加图片ID
因为利用JS判断出鼠标位置后，还需要将眼珠相对位置在LOGO的上面，因此需要将一些元素添加ID，以便JS代码调用。
<H1 id=Logo265><A href="http://www.59seo.com.cn/"><IMG id=logoimg alt="" src="images/logo265.gif" border=0></A></H1>/*H1和IMG的ID可自行修改，但需要和第二步JS代码中的一致，以便调用*/
第二步：添加跟随函数
眼睛跟随效果最主要的就是判断鼠标位置，然后设置眼珠的相对定位，因此需要在页面<head></head>区添加代码,其中关键代码如下

<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)
    }
  }
};
function Mb(a)
{
  return document.getElementById(a)
}
function Nb(a, b)
{
  return a.getElementsByTagName(b)[0]
}
</SCRIPT> 
第三步：初始化函数
经过上面设置，还需要调用初始化函数，找到<body></body>区，添加如下代码，才能&ldquo心&rdquo随我动。
<SCRIPT type=text/javascript>
EYES_init();/*激活初始化函数eyes_init()*/
</SCRIPT>

总结
这种眼珠跟着鼠标走，说白了就是一种吸引人眼球的噱头，可能实用性方面还需加强，当然，关于JavaScript代码判断鼠标位置，其实我们还可以应用到图片的鼠标跟随，还可以运用在图片展示，比如鼠标向右偏多少，就显示下一张图片，向左移动就显示前一张图片，相信这样的效果一定很酷。

演示:

 

 

 

点击这里获取该日志的TrackBack引用地址

转载须注明来自"我就SEO"

上一篇： 局域网中被限制了怎么办 下一篇：郁闷~空间商的三级域名收录比我主域名都多

相关文章

  • quote 1.菜鸟
  • 大虾,我是个菜鸟!
    我看你这还是看不到懂!
    遮照图片是怎样的?能详细的说下吗?
    前面那将元素添加ID是放哪呀?
    H1是什么意思呀?
    马上教下我好吗?
    要能把页面完整源码和图片发给我最好.
    我先谢谢你了!
  • 2008-11-3 3:18:12 回复该留言
  • quote 2.B
  • 源码就在那个http://www.59seo.com.cn/dmys/265yanjing/yanjing.htm里 你直接保存下这个就行
  • 2008-11-3 10:13:10 回复该留言
  • quote 4.caiddx
  • http://www.260dh.cn
  • SEO 你好 这眼睛我整的差不多了，代码加上去以后图片显示在网站的正中间，因为我用的是原代码，只改了图片的位置。
    你看 www.260dh.cn/265yanjing.htm www.260dh.cn 指点一下，先谢谢了
    B 于 2009-10-16 10:37:39 回复
    楼上的兄弟 你图片无法显示啊
  • 2009-10-14 19:51:26 回复该留言

发表评论:

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。