仿Google首页分类菜单效果_js仿google手机弹出三级菜单效果-CSDN博客

本文链接：https://blog.csdn.net/lizhitao/article/details/2585575
<!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>