<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML><HEAD><TITLE>仿Google首页分类菜单效果</TITLE>
<META http-equiv=Content-Type content=text/html;charset=gb2312>
<STYLE type=text/css>BODY {
TEXT-ALIGN: center
}
TABLE {
BORDER-RIGHT: #eeeeee 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #eeeeee 1px solid;PADDING-LEFT: 0px;
PADDING-BOTTOM: 3px; BORDER-LEFT: #eeeeee 1px solid; PADDING-TOP: 3px; BORDER-BOTTOM: #eeeeee 5px solid
}
.icon TD {
BACKGROUND-IMAGE: url(svc_sprite_all.gif); WIDTH: 50px; HEIGHT: 37px
}
.capt TD {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 2px; FONT: 11px verdana; PADDING-TOP: 2px
}
.a {
BACKGROUND-POSITION-Y: 0px
}
.b {
BACKGROUND-POSITION-Y: -37px
}
.c {
BACKGROUND-POSITION-Y: -74px
}
.d {
BACKGROUND-POSITION-Y: -111px
}
.e {
BACKGROUND-POSITION-Y: -148px
}
.f {
BACKGROUND-POSITION-Y: -185px
}
.g {
BACKGROUND-POSITION-Y: -222px
}
.f1 {
BACKGROUND-POSITION-X: 0px
}
.f2 {
BACKGROUND-POSITION-X: -51px
}
.f3 {
BACKGROUND-POSITION-X: -101px
}
.f4 {
BACKGROUND-POSITION-X: -153px
}
.f5 {
BACKGROUND-POSITION-X: -205px
}
.f6 {
BACKGROUND-POSITION-X: -257px
}
.f7 {
BACKGROUND-POSITION-X: -309px
}
</STYLE>
<SCRIPT language=javascript>
window.οnlοad=function(){
var t=document.getElementsByTagName('table')[0];
var cs=t.rows[1].cells,ct=t.rows[0].cells;
for(var i=0;i<cs.length;i++)
cssAni(cs[i],ct[i],7); //参数依次为:第一行的列,第二行的列,num
}
function cssAni(osrc,otarget,num,duration){
var t=null, c=1, d=0, n=0;
var i=Math.floor((duration|300)/num);
//alert("延迟时间:"+i);
var s=otarget.className.replace(/.$/,'')
var r=/over/;
// alert("该列的class名:"+s+" "+otarget.className);
osrc.οnmοuseοver=osrc.οnmοuseοut=function(e){
//event.type 注释:返回没有“on”作为前缀的事件名,比如,onclick事件返回的type是click只读。
n=r.test((e||event).type)?1:-1;//当鼠标经过超链接时表达式为:true,值为1,当鼠标离开超链接时表达式为false,值为-1
//alert("event:"+(e||event.srcElement.tagName));
//alert(!t+" "+n);
if(!t) //t对象为空时,执行如下操作
t=setInterval(function(){
//alert(!0);
//alert((c==1||c==num)&&((d==n||c+n<1)||!(d=n)));
//如下的判断做详细解释说明:当鼠标经过超链接时表达式为此时变量c=1为true,num=7,(c==num)不相等为false,
//而d=0,n=1即d==n为false,c+n=2<1为false,接着做赋值操作d=n即d值为1,!(d=n)为false,所以整个判断语句为false,
//此后随之c不断递增,当c递增到7时,即(c==1 || c==num)为true,此时的的d=1,n=1,因此d==n为true,所以整个(((d==n||c+n<1)||!(d=n)))
//这时整个判断语句为true,最后执行clearInterval(t)删除周期执行该函数.
//同理当鼠标离开超链接时表达式此时变量c=7,(c==1 || c==num)语句为false,n=-1,d=1,(d==n)为false,c+n=7+(-1)<1为false,
//接着d被重新赋值为-1,(!(d=n))为false,随后c随d而递减直至c=1时,(c==1||c==num)语句为true,d=n=-1,d==n为true,c+n=0<1为true
//((d==n||c+n<1)||!(d=n))语句为true,最后执行clearInterval(t)删除周期执行该函数
if((c==1||c==num)&&((d==n||c+n<1)||!(d=n)))
return clearInterval(t),t=null;
//第一行的列换图标
//alert("改变前的class名: "+otarget.className);
//alert((c));
otarget.className=s+(c+=d);
//alert("改变后的class名: "+otarget.className);
},i);
};
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2995" name=GENERATOR></HEAD>
<BODY>
<TABLE>
<TBODY>
<TR class=icon>
<TD class="a f1"></TD>
<TD class="b f1"></TD>
<TD class="c f1"></TD>
<TD class="d f1"></TD>
<TD class="e f1"></TD>
<TD class="f f1"></TD>
<TD class="g f1"></TD></TR>
<TR class=capt>
<TD><A
href="javascript:void(null)">A</A></TD>
<TD><A
href="javascript:void(null)">B</A></TD>
<TD><A
href="javascript:void(null)">C</A></TD>
<TD><A
href="javascript:void(null)">D</A></TD>
<TD><A
href="javascript:void(null)">E</A></TD>
<TD><A
href="javascript:void(null)">F</A></TD>
<TD><A
href="javascript:void(null)">G</A></TD></TR></TBODY></TABLE>
</BODY></HTML>