javascript滑动菜单制作

javascript滑动菜单制作

     下面是用javascript制作的滑动菜单效果，其实在显示的页面就是只用了一个Label控件，HTML代码都是自动生成的。

javascript的代码：

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;

}

组织菜单的代码：

   菜单
相关阅读:
Docker学习笔记之一，搭建一个JAVA Tomcat运行环境
 利用Docker构建开发环境
 MyEclipse 8.6.1 制作绿色版
 Tomcat，JBoss与JBoss Web
oracle,mysql,SqlServer三种数据库的分页查询
 Tomcat+JSP经典配置实例
 [转载]JDK自带的实用工具——native2ascii.exe
用sql删除数据库重复的数据的方法
 Dom4j 使用简介(全而好的文章)
Java操作XML文件 dom4j 篇
原文地址：https://www.cnblogs.com/ringwang/p/992094.html