265 LOGO 会动的眼睛 详细版

来源:百度文库 编辑:神马文学网 时间:2024/04/19 16:15:07
网上有代码,但并没有代码的参数说明,根本用不了。我发布一个目前最详细的。
简单演示地址http://www.snscool.com/265logo/

准备三张图片,第一张是正常的LOGO,第二张是挡住LOGO上眼睛的图片,第三张是眼睛的图片(一般就是一个小黑点)。

下面是JS文件代码,网上能找到。怀疑google的JS程序不是手写的,是编译器生成的。
  1. function m(a, b)
  2. {
  3.   return a.position = b
  4. }
  5. function o(a, b)
  6. {
  7.   return a.left = b
  8. }
  9. function ca(a, b)
  10. {
  11.   return a.zIndex = b
  12. }
  13. var p = "length", r = "style", s = "body", x, y;
  14. function U(a)
  15. {
  16.   return document.createElement(a)
  17. }
  18. var Y, mb, nb, ob, pb, Z, $;
  19. var qb = 20, rb = 22, sb = 20, tb = 28, ub = 33, vb = 28, wb = 22, xb = 27, yb = 31, zb = 27, Ab = 6, Bb = 4, Cb = 1, Db = 200;
  20. var Eb;
  21. var Fb = "http://www.snscool.com/265logo/images/logo.gif";
  22. function Gb(a)
  23. {
  24.   var b = 0, c = 0;
  25.   if (a.pageX || a.pageY)
  26.   {
  27.     b = a.pageX;
  28.     c = a.pageY
  29.   }
  30.   else if (a.clientX || a.clientY)
  31.   {
  32.     b = a.clientX + document[s].scrollLeft;
  33.     c = a.clientY + document[s].scrollTop
  34.   }
  35.   return [b, c]
  36. }
  37. function Ib(a)
  38. {
  39.   Jb();
  40.   a = a || document.parentWindow.event;
  41.   var b = Gb(a), c = b[0], d = b[1];
  42.   Kb(c, d, Z, sb, tb);
  43.   Kb(c, d, $, ub, vb)
  44. }
  45. function Kb(a, b, c, d, g)
  46. {
  47.   var e = a - d - mb, f = (b - g - nb) * (Ab / Bb), j = Math.sqrt(Math.pow(e, 2)
  48.     + Math.pow(f, 2)), h, l;
  49.   if (j == 0)
  50.   {
  51.     h = d;
  52.     l = g
  53.   }
  54.   else
  55.   {
  56.     var B = Math.sqrt(Math.pow(j, 2) + Math.pow(Db, 2)), E = Ab * j / B;
  57.     h = E * e / j + d + mb;
  58.     l = E * f / j / (Ab / Bb) + g + nb
  59.   }
  60.   h -= Cb;
  61.   l -= Cb;
  62.   o(c[r], parseInt(h, 10) + "px");
  63.   c[r].top = parseInt(l, 10) + "px"
  64. }
  65. function EYES_init()
  66. {
  67.   var a = Mb("logo"), b = Nb(a, "a");
  68.   Eb = Nb(a, "img");
  69.   if ( - 1 == Eb.src.indexOf(Fb))
  70.   {
  71.     return
  72.   }
  73.   Y = U("img");
  74.   Z = U("img");
  75.   $ = U("img");
  76.   Y.border = (Z.border = ($.border = 0));
  77.   Y.src = "http://www.snscool.com/265logo/images/dang.gif";
  78.   Z.src = ($.src = "http://www.snscool.com/265logo/images/eye.gif");
  79.   Jb();
  80.   m(Y[r], m(Z[r], m($[r], "absolute")));
  81.   ca(Y[r], 90);
  82.   ca(Z[r], ca($[r], 100));
  83.   b.appendChild(Y);
  84.   b.appendChild(Z);
  85.   b.appendChild($);
  86.   document.onmousemove = Ib;
  87.   T(window, "pageshow", Jb);
  88.   T(window, "resize", Jb)
  89. }
  90. function Jb()
  91. {
  92.   var a = Ob(Eb);
  93.   mb = a.x;
  94.   nb = a.y;
  95.   ob = Eb.width;
  96.   pb = Eb[p];
  97.   var b = "px";
  98.   o(Y[r], mb + qb + b);
  99.   Y[r].top = nb + rb + b;
  100.   o(Z[r], a.x + wb + b);
  101.   Z[r].top = a.y + xb + b;
  102.   o($[r], a.x + yb + b);
  103.   $[r].top = a.y + zb + b
  104. }
  105. function Ob(a)
  106. {
  107.   var b = a.offsetLeft, c = a.offsetTop;
  108.   if (a.offsetParent != null)
  109.   {
  110.     var d = Ob(a.offsetParent);
  111.     b += d.x;
  112.     c += d.y;
  113.   }
  114.   return{x:b,y:c}
  115. }
  116. function T(a, b, c)
  117. {
  118.   var d = "on" + b;
  119.   if (a.addEventListener)
  120.   {
  121.     a.addEventListener(b, c, false)
  122.   }
  123.   else if (a.attachEvent)
  124.   {
  125.     a.attachEvent(d, c)
  126.   }
  127.   else
  128.   {
  129.     var g = a[d];
  130.     a[d] = function()
  131.     {
  132.       var e = g.apply(this, arguments), f = c.apply(this, arguments);
  133.       return e == undefined ? f : (f == undefined ? e : f && e)
  134.     }
  135.   }
  136. };
  137. function Mb(a)
  138. {
  139.   return document.getElementById(a)
  140. }
  141. function Nb(a, b)
  142. {
  143.   return a.getElementsByTagName(b)[0]
  144. }
  145. EYES_init();
复制代码下面是关键,代码中的变量说明,我是一个一个试出来的:
  1. qb 遮挡图片横坐标
  2. rb 遮挡图片纵坐标
  3. sb 左眼图片横坐标
  4. tb 左眼图片纵坐标
  5. ub 右眼图片横坐标
  6. vb 右眼图片纵坐标

  7. wb 左眼图片初始横坐标
  8. xb 左眼图片初始纵坐标
  9. yb 右眼图片初始横坐标
  10. zb 右眼图片初始纵坐标

  11. Ab 眼睛运动范围(椭圆形)横轴长度
  12. Bb 眼睛运动范围(椭圆形)纵轴长度

  13. Cb 作用不详,保持默认即可
  14. Db 眼睛鼠标运动的灵敏程度

  15. Fb logo图片地址
  16. Y.src 遮挡眼睛的图片地址
  17. Z.src 眼睛的图片地址
复制代码调用:

复制代码注意js调用要在