完美实现265上网导航LOGO上眼睛跟随鼠标转动特效

2019-04-01 唯唯一一 佚名 点击: 评论
效果查看:http: www 265 com 眼珠子真的会东哦~~ 第一眼看到这效果,大多数人可能都会觉得这是用FLASH做的,但再仔细观察,其实只是GIF图片,那GIF图片怎么会出现

天晟网络小编整理设计教程 > logo设计 > 时看到完美实现265上网导航LOGO上眼睛跟随鼠标转动特效,下面有小编28为你找到的15985相关内容希望对你28有所帮助。

完美实现265上网导航LOGO上眼睛跟随鼠标转动特效

一、效果查看:http://www.265.com/ 眼珠子真的会东哦~~      第一眼看到这效果,大多数人可能都会觉得这是用FLASH做的,但再仔细观察,其实只是GIF图片,那GIF图片怎么会出现这种效果呢?原来是有三张GIF图,一张背景LOGO,一张眼珠图片和一张遮照图,然后利用JS代码,判断鼠标的位置,然后移动眼珠,形成眼珠跟着鼠标走的感觉。这种效果应用到自己的网站,只需更换265的LOGO图片即可。
 

二、效果实现:

第一步:添加图片ID

    因为利用JS判断出鼠标位置后,还需要将眼珠相对位置在LOGO的上面,因此需要将一些元素添加ID,以便JS代码调用。

<H1 id=Logo265><A href="http://www.weiweiyiyi.cn"><IMG id=logoimg alt="唯唯一一博客" src="images/logo265.gif" border=0></A></H1> /*H1和IMG的ID可自行修改,但需要和第二步JS代码中的一致,以便调用*/

 第二步:添加跟随函数

    眼睛跟随效果最主要的就是判断鼠标位置,然后设置眼珠的相对定位,因此需要在页面中添加代码,其中关键代码如下:

<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 = "images/logo.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 = "images/eyeballmask.gif";/*设置遮照图片位置*/
Z.src = ($.src = "images/pupil.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]
}
EYES_init();
</SCRIPT>

三、看修改后的效果:

完美实现265上网导航LOGO上眼睛跟随鼠标转动特效
http://www.nbcbs.com/epub/

文章转载请注明来自天晟网络 > 设计教程 > logo设计 >
原文标题:完美实现265上网导航LOGO上眼睛跟随鼠标转动特效
原文网址:http://www.timsion.com/logo/15985.html

关键词:上网导航 LOGO 特效 265

上一篇:2008年Logo设计潮流点评
下一篇:2009年LOGO设计趋势

免责声明:以上内容来自互联网和用户投稿,不代表本站的观点和立场,版权归原作者所有,如有侵权,请与我们联系。