JavaScript实现265导航上的可爱眼睛
hao123.com,265.com以及114la.com这几个导航网站,基本算是国内导航站里的代表了。
现在hao123.com被百度收购,265.com被文胜兄连g.cn一起卖给了Google,两家分别是亏是赚,很多人心里明白。
这里只说说265的LOGO上的眼睛,上过265的人或许都会发现,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的应用里,利用四张图,把这双眼睛做得如此可爱。真是网页设计的有趣之处,设计网页,设计生活,设计人生,需要的是技能和灵感!

















