谷歌首页工具栏动画实现代码阅读

看到谷歌首页新的工具栏动画,忍不住找到其中代码看看。


(
function(){
//注册事件侦听
function register(c,d,b){
var a=on+d;
if(c.addEventListener){
c.addEventListener(d,b,
false);
}
else if(c.attachEvent){
c.attachEvent(a,b);
}
else{
var f=c[a];
c[a]
=function(){
var g=f.apply(this,arguments),e=b.apply(this,arguments);return g==undefined?e:(e==undefined?g:e&&g)
}

}

}
;
//n=每帧画面的高,m=每帧画面的宽
var l=images/toolbar_animation_20070919.png,m=52,n=37,o=75,p=100;

//工具栏对象数据对象
function q(c,d,b,a,f){
return{url:c,name:d,tooltip:b,color:a,yAdjust:f}
}

//工具栏对象数据数组
var r=[q(http://video.google.cn/,视频,搜索热门网络视频,#54a70d,[2,5]),
q(
http://images.google.cn/,图片,搜索全球的图片,#3b79e7,[2,5]),
q(
http://news.google.cn/,资讯,跟踪社会热点,搜索最新资讯,#f3e76e,[3,7]),
q(
http://ditu.google.cn/,地图,查询地址、捜索周边和规划路线,#96cfec,[4,9]),
q(
http://blogsearch.google.cn/,博客搜索,在博客中搜索感兴趣的主题,#e6af36,[3,7]),
q(
http://www.google.cn/rebang/,热榜,查看分类热门搜索排行,#ff9202,[2,5]),
q(
http://daohang.google.cn/,网站导航,网址大全,快速直达常用网站,#d93c08,[2,5])];

var objectList=[];//动画对象维护列表

function t(c,d){
while(d&&c!=d)d=d.parentNode;
return d==c
}


/**
*事件响应特殊处理
*
*@param string eventtype 事件类型
*@param int index 动画对象维护列表索引
*/

function v(eventtype,index){
return function(b){
b
=b||window.event;
var a=objectList[index],f=eventtype==mouseover;
var g=b.target||b.srcElement,e=b.relatedTarget||(f?b.fromElement:b.toElement),h=!e||t(a.element,e),i=t(a.element,g);
if(f&&!h||!f&&(!e||i&&!h)){
var j=a.icon;
j.mouseTimeout
=window.clearTimeout(j.mouseTimeout);
var u=f?1:1;
if(j.popup != u)j.mouseTimeout=window.setTimeout(j.doPlay(u,undefined),f?p/3:p)
}

}

}

/**
*注册事件响应
*
*@param object element 元素
*@param string eventtype 事件名
*@param int index
*/

function addListener(element, eventtype, index){register(element, eventtype, v(eventtype, index))}

/**
*工具栏提示
*
*@param object tbItem 工具栏项
*@param string url 链接地址
*@param string tipText 提示文字
*/

function ToobarTip(tbItem, url, tipText){
this.toolbaritem = tbItem;
var a=document.createElement(div);
var f=c.color;
var g=background-color:+f;
var e=width:1px;height:1px;+g+;float:;
var h=<div style=”height:1px;overflow:hidden”><div style=”+e+left”></div><div style=”+e+right”></div></div>;
var i=margin:0 1px;height:1px;overflow:hidden;+g;

//画圆角边框,以及下部尖角
a.innerHTML=<div style=”display:none;position:absolute;top:0;left:0;z-index:2;background:#fff;cursor:pointer;cursor:hand”>
+<a href=”+ url +” style=”color:#444;text-decoration:none” target=_blank>
+<div style=”+i+“></div>
+<div style=”text-align:center;border-left:1px solid;border-right:1px solid;border-color:+f+“>
+h
+<div style=”margin:0 auto;white-space:nowrap;padding:.2em 0 0″>
+<font size=-1><span>+tipText+</span></font>
+</div>
+h
+</div>
+<div style=”+i+“></div>
+<div style=”height:4px” align=”center”>
+<div style=”position:relative;top:-1px;z-index:3;width:8px;overflow:hidden;margin:0 auto;height:4px;background:no-repeat -260px + c.spriteCoordinateList[0].y +px”></div>
+</div>
+</a></div>;
this.h=a.getElementsByTagName(span)[0];
document.body.appendChild(a);
a.firstChild.firstChild.lastChild.firstChild.style.backgroundImage
=url(+l+);//尖角
this.element=a.firstChild;
var j=objectList.length;
objectList.push(
{icon:tbItem,element:this.element});
addListener(
this.element,mouseover,j);
addListener(
this.element,mouseout,j)
}


/**
*渲染指定帧的tip
*
*@param int framenum 帧数
*/

ToobarTip.prototype.play
=function(framenum){
var d=this.toolbaritem.element.firstChild,b={left:d.offsetLeft,top:0};
while(d){
b.left
+=d.offsetLeft;
b.top
+=d.offsetTop;
d
=d.offsetParent
}

var a=this.element.style;
if(a.display==none)
{
a.visibility
=hidden;
a.display
=block
}

var f=this.element.offsetHeight,g=this.h.offsetWidth+14;
if(a.visibility==hidden)
{
a.display
=none;
a.visibility
=visible
}

a.width
=g+px;

b.left
-= (g this.toolbaritem.element.parentNode.offsetWidth)/2;
b.top
-= f 3;
b.top
+= 20 * Math.pow(1framenum/this.toolbaritem.frames,3);
a.left
= b.left+px;
a.top
= b.top+px;
if(framenum == 0||this.toolbaritem.popup<0)//moveout时,tip层直接隐藏
a.display=none;
else{
a.display
=“”;
var e = framenum/this.toolbaritem.frames;
if(opacity in a)
a.opacity
=e;
else if(MozOpacity in a)
a.MozOpacity
=e;
else if(KhtmlOpacity in a)
a.KhtmlOpacity
=e;
else if(filter in a)
a.filter
=alpha(opacity=+e*100+)
}

}
;

/**
*标签
*
*
*/

function ToolbarItem(element, coordinates, color, url, tooltip){
this.element = element;
this.mouseTimeout = null;//当前执行
this.frames = coordinates.length1;//帧数
this.spriteCoordinateList = coordinates;//各帧图片坐标位置
this.color = color;//提示文字的颜色
this.d = null;
this.g = element.getElementsByTagName(div)[1];//动画帧显示区域
this.tip = new ToobarTip(this, url, tooltip);//初始化动画场景
this.popup = 1;//1=弹出,-1=收回
this.currentFrameNum = 1;//当前动画播放帧

var itemIndex = objectList.length;
objectList.push(
{icon:this,element:element});
addListener(element,
mouseover, itemIndex);
addListener(element,
mouseout, itemIndex);
}


ToolbarItem.prototype.doPlay
=function(c,d){
var b=this;
return function(){b.play(c,d)}
}
;

/**
*渲染指定帧
*
*@param int ispopup 弹出或收回:1=弹出,-1=收回
*@param int framenum 帧数
*/

ToolbarItem.prototype.play
=function(ispopup, framenum){
if(ispopup){
this.popup=ispopup;
this.mouseTimeout=window.clearTimeout(this.mouseTimeout);
this.d=window.clearTimeout(this.d)
}

if(typeof framenum != undefined)this.currentFrameNum = framenum;

//当前帧图片
var b=this.spriteCoordinateList[this.currentFrameNum];//当前帧图片坐标位置
this.g.style.backgroundPosition=-b.x+px +-b.y+px;//得到当前帧的图片
//当前帧提示层渲染
this.tip.play(this.currentFrameNum);

//当前帧文字链接样式
var a=this.element.style;
if(this.popup<0){//mouseout
a.color=#444;
a.textDecoration
=none
}
else{//mouseover
a.color=this.color;
a.textDecoration
=underline
}


this.currentFrameNum += this.popup;
if(this.currentFrameNum > this.frames)
this.currentFrameNum = this.frames1;
else if(this.currentFrameNum<0)
this.currentFrameNum = 1;
else
this.d=window.setTimeout(this.doPlay(undefined,undefined),o);//动画计时器
}
;

//页面加载完毕时,初始化标签
register(window,load,function(){
try{
document.execCommand(
BackgroundImageCache,false,true)
}
catch(c){}

var d=<table style=”margin:2em auto;border-collapse:collapse;line-height:1.4em” cellpadding=”3″ cellspacing=”2″ border=”0″><tr>;
//初始化各标签数据,及其页面代码
for(var b=0;b<r.length;++b){
var a=r[b];
a.url
=/url?ct=pro&cd=+b+&source=cwh&q=+encodeURIComponent(a.url);

var f=[],g=n*b;//g=当前标签的top
//计算各帧图片坐标位置
for(var e=0;e<7;++e)if(e>4)f.push({x:m*4,y:ga.yAdjust[e5]});else f.push({x:m*e,y:g});
a.coordinates
=f;

d
+=<td style=”text-align:center;padding:0 .35em 0 .4em;margin:0;cursor:pointer;cursor:hand”><a style=”color:#444;text-decoration:none;” href=”+a.url+” target=_blank><div><div style=”width:52px;height:37px;margin:.5em auto;cursor:pointer;cursor:hand;background: no-repeat 0 +-g+px”></div><span style=”white-space:nowrap”><font size=-1>+a.name+</font></span></div></a></td>
}

d
+=</tr></table>;

//获取插入点
var h=document.getElementById(tb);
h.innerHTML
=d;

var i=h.getElementsByTagName(a);
for(var b=0;b<i.length;++b){
i[b].firstChild.firstChild.style.backgroundImage
=url(+l+);
new ToolbarItem(i[b],r[b].coordinates,r[b].color,r[b].url,r[b].tooltip)
}

}

);
}
)();

谷歌首页工具栏动画实现代码阅读》上有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注