看到谷歌首页新的工具栏动画,忍不住找到其中代码看看。
(
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 = this .toolbaritem .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 ' + - this .toolbaritem .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( 1 - framenum / 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.length - 1 ; // 帧数 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 .frames - 1 ; 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:g - a.yAdjust[e - 5 ]} ); 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) } } ); }
)();