99、类似QQ的导航条

99、类似QQ的导航条

脚本说明:

把如下代码加入<body>区域中

<script language="JavaScript">

<!--

//该函数在调用过程中只需要在将要点击的单元格内的onclick事件中调用showme函数即可

//function showme(obj1, obj2)该函数主要为使点击的对象高亮度显示,并调用moveme函数,参数obj1为母体即<div>标签的idobj2为点击对象本身

//function moveme(obj)该函数判断单元的移动,并调用相应的函数处理,obj参数为母体

//function moveup(obj,objtop)该函数使一个单元向上移动,参数obj为母体,objtop为母体的本身最高高度

//function movedown(obj,objbuttom)该函数使一个单元向下移动,参数obj为母体,objbuttom为母体的本身最低高度

 

var headHeight = 22;//每个标题的高度

var bodyHeight = 160;//母体高度

var objcount = 6;//项目的个数,要改变了项目的个数别忘了该这个东西

var step = 6;//移动速度(请确认可以被'bodyHeight-headHeight'整除,当前的设定可选速度为1,2,3,6,23,138)

var moving = false;//是否有移动的项目

 

function showme(obj1, obj2)

{

       //以下循环为改变标题的背景颜色

       if (moving)

              return;

       moving = true;

       for(i=0;i<document.all.tags("td").length;i++)

              if (document.all.tags("td")[i].className.indexOf('headtd') == 0)

                     document.all.tags("td")[i].className = 'headtd1';

       obj2.className = 'headtd2';

       moveme(obj1);

}

 

function moveme(obj)

{

       idnumber = parseInt(obj.id.substr(4));

       objtop = headHeight * (idnumber - 1);

       objbuttom = bodyHeight + headHeight * (idnumber - 2);

       currenttop = parseInt(obj.style.top);

       if (currenttop >= objbuttom)

       {

              //检验出每一个应该向上移动的层

              countid = 1;

              for(i=0;i<document.all.tags("div").length;i++)

                     if (document.all.tags("div")[i].id == 'item'+countid+'body')

                     {

                            obj = document.all.tags("div")[i];

                            objtop = headHeight * (countid - 1);

                            if (countid == idnumber)

                            {

                                   moveup(obj,objtop,false);

                                   break;

                            }

                            else

                                   moveup(obj,objtop,true);

                            countid++;

                     }

       }

       else if ((currenttop <= objtop) && (idnumber < objcount))

       {

              //检验出每一个应该向下移动的层

              idnumber++;

              countid = objcount;

              for(i=document.all.tags("div").length-1;i>=0;i--)

                     if (document.all.tags("div")[i].id == 'item'+countid+'body')

                     {

                            obj = document.all.tags("div")[i];

                            objbuttom = bodyHeight + headHeight * (countid - 2);

                            if (countid == idnumber)

                            {

                                   movedown(obj,objbuttom,false);

                                   break;

                            }

                            else

                                   movedown(obj,objbuttom,true);

                            countid--;

                     }

       }

}

 

function moveup(obj,objtop,ismove)

{

       currenttop = parseInt(obj.style.top);

       if (currenttop > objtop)

       {

              obj.style.top = currenttop - step;

              setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)

              return;

       }

       moving = ismove;

}

 

function movedown(obj,objbuttom,ismove)

{

       currenttop = parseInt(obj.style.top);

       if (currenttop < objbuttom)

       {

              obj.style.top = currenttop + step;

              setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)

              return;

       }

       moving = ismove;

}

// -->

</script>

<style type="text/css">

<!--

.headtd1 {  background: #00A4E1; border: 2px outset; border-color: #00BBFF #0077FF #0077FF #00BBFF; cursor: hand; font-size: 9pt}

.headtd2 {  background: #20C1FF; border: 2px outset; border-color: #60D3FF #0077FF #0077FF #60D3FF; cursor: hand; font-size: 9pt}

.bodytd  {  background: #99CCFF; border: 2px outset; border-color: #B0D8FF #0077FF #0077FF #B0D8FF; font-size: 9pt}

-->

</style>

<!--改改这个divmainboard)的height,加一个项目当然要把它的值加22了,减一个项目当然就是减22//-->

<div id="mainboard" style="position:absolute; left:2px; top:2px; width:120px; height:270px; z-index:3; overflow: hidden; background: #0099FF;" onclick="">

  <div id="item1body" style="position:absolute; left:0; top:0; width:120px; height:160px; z-index:1; overflow: hidden">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item1head" height="20" class="headtd2" onclick="showme(item1body,this)">

          <div align="center">工作室</div>

        </td>

    </tr>

    <tr>

        <td class="bodytd">

          <div align="center"><a href="http://www.7stk.com">7stk 网页特效代码</a></div>

        </td>

    </tr>

  </table>

  </div>

  <div id="item2body" style="position:absolute; left:0px; top:160; width:120; height:160; z-index:2; overflow: hidden">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item2head" height="20" class="headtd1" onclick="showme(item2body,this)">

          <div align="center">邮箱</div>

        </td>

      </tr>

      <tr>

        <td class="bodytd">

          <div align="center"><a href="mailto:webmaster@7stk.com">发信给我哟</a></div>

        </td>

      </tr>

    </table>

    <p class="headtd1"> </p>

  </div>

  <div id="item3body" style="position:absolute; left:0; top:182; width:120px; height:160; z-index:3">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item3head" height="20" class="headtd1" onclick="showme(item3body,this)">

          <div align="center">Q  Q</div>

        </td>

      </tr>

      <tr>

        <td class="bodytd">

          <div align="center">37146743</div>

        </td>

      </tr>

    </table>

  </div>

  <div id="item4body" style="position:absolute; left:0; top:204; width:120px; height:160; z-index:4; overflow: hidden">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item4head" height="20" class="headtd1" onclick="showme(item4body,this)">

          <div align="center">朋友</div>

        </td>

      </tr>

      <tr>

        <td class="bodytd">

          <div align="center">

            <p>小一、旁腾<br>

            </p>

          </div>

        </td>

      </tr>

    </table>

  </div>

  <div id="item5body" style="position:absolute; left:0; top:226; width:120px; height:160; z-index:4; overflow: hidden">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item5head" height="20" class="headtd1" onclick="showme(item5body,this)">

          <div align="center">陌生人</div>

        </td>

      </tr>

      <tr>

        <td class="bodytd">

          <div align="center">

            <p>小虎<br>

              AAP<br>

              <br>

              小伙伴<br>

              小一</p>

          </div>

        </td>

      </tr>

    </table>

  </div>

  <!--如果要添加一个子项目请拷贝一份下面的代码并放于后面。干什么,不要拷贝我了,是下面的//-->

  <div id="item6body" style="position:absolute; left:0; top:248; width:120px; height:160; z-index:4; overflow: hidden">

    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">

      <tr>

        <td id="item6head" height="20" class="headtd1" onclick="showme(item6body,this)">

          <div align="center">版本号</div>

        </td>

      </tr>

      <tr>

        <td class="bodytd">

          <div align="center">

            <p>版本号:1.1<br>

              <br>

              封锁了移动过<br>

              程中的点击事件<br>

              这样不会出现抖<br>

              动现象了。

          </div>

        </td>

      </tr>

    </table>

  </div>

  <!--哎哎,别往下拷贝了,到我得上面为止了,拷贝到代码放到我后面吧

             哦,对了别忘了改几个id呀,dividtdid,还有onclick事件中的对象id

             id的规则是divitem+数字+bodytditem+数字+head

             还有divstyle中的top值呀,是多少,上面这个divtop加上22就是了

             别忘了按照body下的提示改改mainboardheight呀。还有给教本中的objcount数量改为你现在项目的个数

             别傻了,快点行动吧,要不赶不上饭点了//-->

</div>

</body>

</html>

 

Write a comment

Comments: 0