转载 仿google导航效果收藏

新一篇: 有多少人真正了解document.getElementById? | 旧一篇: 利用session,cookie进行安全性控制

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2310">
<title>仿google首页下端图片文字导航</title>
<style type="text/css"><!--
#svc-toolbar .bgp-fr
{background: transparent url(images/svc_sprite_all.gif) 0 0 no-repeat}
.ttv
{background: transparent url(images/svc_sprite_all.gif) 0 0 no-repeat}
-->
body
{font:62.5% Gulim,arial,sans-serif,verdana;height:100%;line-height:1.4em;margin:0;padding:0;}
table
{margin:0 auto;border-collapse:collapse;}
td
{text-align:center;padding:0;margin:0;}
form
{margin:0;}
.bgp a,.bgp span
{display:block;cursor:pointer;}
.bgp .bgp-fr
{margin:0 auto;}
#wrapper
{text-align:center;font-size:1.3em;}
a:link,a:active,a:visited
{color:#444;text-decoration:none;}
a:hover
{color:#0000CC;text-decoration:underline;}
#svc-toolbar
{margin:2em auto 1.5em auto;}
#svc-toolbar .bgp-fr
{width:52px;height:37px;margin-bottom:.5em;}
#svc-toolbar td
{font-size:.9em;padding:0 .35em 0 .4em;}

/*2*/
.ttm
{position:absolute;font-size:1.2em;top:0;left:0;z-index:2;background:#fff;}
.ttl
{margin:0 1px;height:1px;overflow:hidden;font-size:0;background-color:red;}
.ttc
{text-align:center;border-left:1px solid red;border-right:1px solid red;}
.tt-text
{margin:0 auto;white-space:nowrap;padding:.2em 0 0;}
.ttdc
{height:1px;overflow:hidden;}
.ttdl,.ttdr
{width:1px;height:1px;filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;float:left;}
.ttdr
{float:right;}
.ttvc
{height:4px;}
.ttv
{position:relative;top:-1px;z-index:3;width:8px;height:4px;overflow:hidden;margin:0 auto;}

/*1*/
#a1-i .bgp-fr
{background-position:0 0;}
#a1-i:hover
{color:#ea0000;}
#a1-i-tt .ttl,#a1-i-tt .ttdl,#a1-i-tt .ttdr
{background-color:#ea0000;}
#a1-i-tt .ttc
{border-color:#ea0000;}
#a1-i-tt .ttv
{background-position:-364px 0px;}

#a2-i .bgp-fr
{background-position:0 -37px;}
#a2-i:hover
{color:#0d53a4;}
#a2-i-tt .ttl,#a2-i-tt .ttdl,#a2-i-tt .ttdr
{background-color:#0d53a4;}
#a2-i-tt .ttc
{border-color:#0d53a4;}
#a2-i-tt .ttv
{background-position:-364px -37px;}

#a3-i .bgp-fr
{background-position:0 -74px;}
#a3-i:hover
{color:#878787;}
#a3-i-tt .ttl,#a3-i-tt .ttdl,#a3-i-tt .ttdr
{background-color:#878787;}
#a3-i-tt .ttc
{border-color:#878787;}
#a3-i-tt .ttv
{background-position:-364px -74px;}

#a4-i .bgp-fr
{background-position:0 -111px;}
#a4-i:hover
{color:#1da745;}
#a4-i-tt .ttl,#a4-i-tt .ttdl,#a4-i-tt .ttdr
{background-color:#1da745;}
#a4-i-tt .ttc
{border-color:#1da745;}
#a4-i-tt .ttv
{background-position:-364px -111px;}

#a5-i .bgp-fr
{background-position:0 -148px;}
#a5-i:hover
{color:#9e7eb9;}
#a5-i-tt .ttl,#a5-i-tt .ttdl,#a5-i-tt .ttdr
{background-color:#9e7eb9;}
#a5-i-tt .ttc
{border-color:#9e7eb9;}
#a5-i-tt .ttv
{background-position:-364px -148px;}

#a6-i .bgp-fr
{background-position:0 -185px;}
#a6-i:hover
{color:#ffb400;}
#a6-i-tt .ttl,#a6-i-tt .ttdl,#a6-i-tt .ttdr
{background-color:#ffb400;}
#a6-i-tt .ttc
{border-color:#ffb400;}
#a6-i-tt .ttv
{background-position:-364px -185px;}

#a7-i .bgp-fr
{background-position:0 -222px;}
#a7-i:hover
{color:#3aa4df;}
#a7-i-tt .ttl,#a7-i-tt .ttdl,#a7-i-tt .ttdr
{background-color:#3aa4df;}
#a7-i-tt .ttc
{border-color:#3aa4df;}
#a7-i-tt .ttv
{background-position:-364px -222px;}
</style>
<script type="text/javascript">
var v=window,ma=Function,$=navigator,u=Number,J=Error,R=document,la=Boolean,o=Math,S=isNaN,m=undefined;function pa(a,b){return a.height=b}function ra(a,b){return a.relatedTarget=b}function V(a,b){return a.currentTarget=b}function ea(a,b){return a.toString=b}function qa(a,b){return a.left=b}function W(a,b){return a.width=b}var Oa="document",L="height",za="slice",na="offsetLeft",B="relatedTarget",K="currentTarget",ba="offsetTop",da="target",i="length",ca="play",w="type",kb="firstChild",_P="prototype",ya="nodeType",k="style",aa="left",D="width",U="parentNode",oa="offsetWidth",xa="body",lb=lb||{},I=this;var l=function(a){return typeof a!="undefined"},O=function(a){return a instanceof Array||va(a)&&typeof a.join=="function"&&typeof a.reverse=="function"},wa=function(a){return typeof a=="string"},db=function(a){return typeof a=="number"},cb=function(a){return typeof a=="function"},va=function(a){return a!=null&&typeof a=="object"},A=function(a){if(a.hasOwnProperty&&a.hasOwnProperty(fa)){return a[fa]}if(!a[fa]){a[fa]=String(++Pb)}return a[fa]},fa="closure_hashCode_",Pb=0,sb=function(a){if(va(a)){if(a.clone){return a.clone()}var b=O(a)?[]:{};for(var c in a){b[c]=sb(a[c])}return b}return a},rb=function(a,b){var c=a.na||[];c=c.concat(Array[_P][za].call(arguments,2));if(a.Q){b=a.Q}if(a.P){a=a.P}var d=function(){var f=c.concat(Array[_P][za].call(arguments));return a.apply(b,f)};d.na=c;d.Q=b;d.P=a;return d},Qb=function(a,b){for(var c in b){a[c]=b[c]}};if(!ma[_P].apply){ma[_P].apply=function(a,b){var c=[],d,f;if(!a)a=I;if(!b)b=[];for(var e=0;e<b[i];e++){c[e]="args["+e+"]"}f="oScope.__applyTemp__.peek().("+c.join(",")+");";if(!a.__applyTemp__){a.__applyTemp__=[]}a.__applyTemp__.push(this);d=eval(f);a.__applyTemp__.pop();return d}}ma[_P].bind=function(a){return rb.apply(null,[this,a].concat(Array[_P][za].call(arguments,1)))};ma[_P].inherits=function(a){function b(){}b.prototype=a[_P];this.oa=a[_P];this.prototype=new b;this[_P].constructor=this};if(!Array[_P].push){Array[_P].push=function(){for(var a=0;a<arguments[i];a++){this[this[i]]=arguments[a]}return this[i]}}if(!Array[_P].pop){Array[_P].pop=function(){var a;if(this[i]){a=this[this[i]-1];this.length--}return a}}Array[_P].peek=function(){return this[this[i]-1]};if(!Array[_P].shift){Array[_P].shift=function(){var a;if(this[i]){a=this[0];for(var b=0;b<this[i]-1;b++){this[b]=this[b+1]}this.length--}return a}}if(!Array[_P].unshift){Array[_P].unshift=function(){var a=arguments[i];for(var b=this[i]-1;b>=0;b--){this[b+a]=this[b]}for(var c=0;c<a;c++){this[c]=arguments[c]}return this[i]}};var Pa=function(a,b,c){if(a.indexOf){return a.indexOf(b,c)}if(Array.indexOf){return Array.indexOf(a,b,c)}if(c==null){c=0}else if(c<0){c=o.max(0,a[i]+c)}for(var d=c;d<a[i];d++){if(a[d]===b)return d}return-1},nb=function(a,b,c){if(a.filter){return a.filter(b,c)}if(Array.filter){return Array.filter(a,b,c)}var d=a[i],f=[],e=wa(a)?a.split(""):a;for(var h=0;h<d;h++){if(b.call(c,e[h],h,a)){f.push(e[h])}}return f},ob=function(a,b,c){if(a.map){return a.map(b,c)}if(Array.map){return Array.map(a,b,c)}var d=a[i],f=[],e=wa(a)?a.split(""):a;for(var h=0;h<d;h++){f.push(b.call(c,e[h],h,a))}return f},mb=function(a,b){if(a.contains){return a.contains(b)}return Pa(a,b)>-1},pb=function(a,b){var c=Pa(a,b),d;if(d=c!=-1){qb(a,c)}return d},qb=function(a,b){return Array[_P].splice.call(a,b,1)[i]==1};var Rb=function(a,b){var c;if(c=in a){delete a[b]}return c};var Sb=function(a){var b={};for(var c=0;c<a[i];c++){b[a.charAt(c)]=true}return b},gc=Sb("()[]{}+-?*.$^|,:#<!\");var Z=function(a,b){W(this,l(a)?u(a):m);pa(this,l(b)?u(b):m)};Z[_P].clone=function(){return new Z(this[D],this[L])};ea(Z[_P],function(){return"("+this[D]+" x "+this[L]+")"});Z.equals=function(a,b){if(a==b){return true}if(!a||!b){return false}return a[D]==b[D]&&a[L]==b[L]};var G=function(a,b){this.x=l(a)?u(a):m;this.y=l(b)?u(b):m};G[_P].clone=function(){return new G(this.x,this.y)};ea(G[_P],function(){return"("+this.x+""+this.y+")"});G.equals=function(a,b){if(a==b){return true}if(!a||!b){return false}return a.x==b.x&&a.y==b.y};G.distance=function(a,b){var c=a.x-b.x,d=a.y-b.y;return o.sqrt(c*c+d*d)};G.squaredDistance=function(a,b){var c=a.x-b.x,d=a.y-b.y;return c*c+d*d};G.difference=function(a,b){return new G(a.x-b.x,a.y-b.y)};var Ja=function(a,b){a=u(a);b=u(b);this.start=a<b?a:b;this.end=a<b?b:a};Ja[_P].clone=function(){return new Ja(this.start,this.end)};ea(Ja[_P],function(){return"["+this.start+""+this.end+"]"});var Ka=function(a,b,c,d){qa(this,l(a)?u(a):m);this.top=l(b)?u(b):m;W(this,l(c)?u(c):m);pa(this,l(d)?u(d):m)};Ka[_P].clone=function(){return new Ka(this[aa],