JavaScript实现265导航上的可爱眼睛

5月 9, 2009  |  2:02 上午分类:网站建设  |  标签:  |  383 views

hao123.com,265.com以及114la.com这几个导航网站,基本算是国内导航站里的代表了。

现在hao123.com被百度收购,265.com被文胜兄连g.cn一起卖给了Google,两家分别是亏是赚,很多人心里明白。

这里只说说265的LOGO上的眼睛,上过265的人或许都会发现,265的LOGO相当可爱,眼珠会随着鼠标的移动而转动:265的LOGO

但是如果只复制下来的话,可以看到是一双不会动的眼睛,要如何去让它动起来呢?

成捷网站建设给您它的javascript实现代码:

# <h1 id=”Logo265″><a href=”#”><img id=”logoimg” src=”http://www.inwebsite.com.cn/effect/images/logo265.gif” border=”0″ /></a></h1>
# <script type=”text/javascript”>
# function m(a, b)
# {
#   return a.position = b
# }
# function o(a, b)
# {
#   return a.left = b
# }
# function ca(a, b)
# {
#   return a.zIndex = b
# }
# var p = “length”, r = “style”, s = “body”, x, y;
# function U(a)
# {
#   return document.createElement(a)
# }
# var Y, mb, nb, ob, pb, Z, $;
# var qb = 52, rb = 34, sb = 47, tb = 35, ub = 69, vb = 35, wb = 53, xb = 36, yb = 62, zb = 35, Ab = 9, Bb = 7, Cb = 1, Db = 100;
# var Eb;
# var Fb = “http://www.inwebsite.com.cn/effect/images/logo265.gif”;
# function Gb(a)
# {
#   var b = 0, c = 0;
#   if (a.pageX || a.pageY)
#   {
#     b = a.pageX;
#     c = a.pageY
#   }
#   else if (a.clientX || a.clientY)
#   {
#     b = a.clientX + document[s].scrollLeft;
#     c = a.clientY + document[s].scrollTop
#   }
#   return [b, c]
# }
# function Ib(a)
# {
#   Jb();
#   a = a || document.parentWindow.event;
#   var b = Gb(a), c = b[0], d = b[1];
#   Kb(c, d, Z, sb, tb);
#   Kb(c, d, $, ub, vb)
# }
# function Kb(a, b, c, d, g)
# {
#   var e = a - d - mb, f = (b - g - nb) * (Ab / Bb), j = Math.sqrt(Math.pow(e, 2)
#     + Math.pow(f, 2)), h, l;
#   if (j == 0)
#   {
#     h = d;
#     l = g
#   }
#   else
#   {
#     var B = Math.sqrt(Math.pow(j, 2) + Math.pow(Db, 2)), E = Ab * j / B;
#     h = E * e / j + d + mb;
#     l = E * f / j / (Ab / Bb) + g + nb
#   }
#   h -= Cb;
#   l -= Cb;
#   o(c[r], parseInt(h, 10) + “px”);
#   c[r].top = parseInt(l, 10) + “px”
# }
# function EYES_init()
# {
#   var a = Mb(”Logo265″), b = Nb(a, “a”);
#   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 = “http://www.www.inwebsite.com.cn/effect/images/eyeballmask.gif”;
#   Z.src = ($.src = “http://www.www.inwebsite.com.cn/effect/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;
#   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>
# <script type=”text/javascript”>
# EYES_init();
</script>

具体的一些图片,我们这方便提供,研究此Javascript也只是为学习之用。您可以看到,在这个javascript的应用里,利用四张图,把这双眼睛做得如此可爱。真是网页设计的有趣之处,设计网页,设计生活,设计人生,需要的是技能和灵感!

喜欢本文,那就收藏到: Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

发表您的评论