XP效果的导航菜单(NEW) - Dreamweaver及网页制作

» 互动论坛 » Dreamweaver及网页制作 » XP效果的导航菜单(NEW)

跳转到：

每页显示15条 1/1 << <1 >>

--------------------------------------------------*/

var TempTableStr = '

主题: XP效果的导航菜单(NEW)

xiaoyun_5d
职务：普通成员
等级：1
金币：0.0
发贴：6
注册：2002/10/13 8:56:07

引用

#12002/10/13 9:18:49

--------------------------------------------

-----------------------------------------------------
------------------------------------------------------

/*--------------------------------------------
管理样式多级菜单 1.0 制作 Stroll

--------------------------------------------*/

//--------------- 有关数据 -----------------//

var IconList = new Array(); // icon图片集合，下标从 1 开始

    IconList[1] = new Image();

    IconList[1].src = "icon/edit.gif";


//---------------- 检测变量菜单的显示隐藏就靠它了！！！ ------------------//

var SubMenuList = new Array();

var NowSubMenu = "";

var mouseCanSound = true;     //--------------------------- 声音开关 ------ 声音开关 ------------------//

var menuSpeed = 50; //---------- 菜单显示速度 ------------//

var alphaStep = 30; //---------- Alpaha 变化度 -----------//

//------------- 构建顶部菜单对象 -------------//

function TopMenu(objName,L,T)
{
    this.id      = "Menu_"+objName;
    this.obj      = objName;
    this.length = 0;

    this.L = L

    this.T = T

    this.addTopMenu = addTopMenu;
    this.addTopLink = addTopLink;

    this.returnAll = returnAll

    document.body.insertAdjacentHTML('afterBegin','');
}

//----------returnAll----------------//

function returnAll(str)
{
    var obj = eval("temp_"+this.id);

    str = eval(str)

    var tempstr = obj.innerHTML


    obj.outerHTML = "";

    str.insertAdjacentHTML('beforeEnd',tempstr)



}

//----------- 构建子菜单对象 -------------//

function SubMenu(objName,objID)
{
    this.obj = objName;
    this.id = objID;

    this.addMenu = addMenu;
    this.addLink = addLink;
    this.addHR = addHR;

    this.length = 0;
}

//-------------- 主菜单对象 addTopMenu 方法 ------------//
function addTopMenu(word,icon,title)
{
    var subID = this.id + "_" + this.length;
    var subObj = this.obj+"["+this.length+"]";

    var oldID = this.id;

    eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");

     makeTopMenu(subID,oldID,word,icon,title);

     this.length++;

}

//------------- 主菜单对象 addTopLink 方法 -------------//
function addTopLink(word,icon,url,target,title)
{
    var subID = this.id + "_" + this.length;
    var oldID = this.id;

     makeTopLink(subID,oldID,word,icon,url,target,title);

     this.length++;
}

//-------------- 生成菜单 makeTopMenu 方法 -----------//
function makeTopMenu(subID,oldID,word,icon,thetitle)
{
    if(icon&&icon!="")
    {
        icon = '

';
    }
    else
    {
        icon = '';
    }

    if(!thetitle||thetitle=="")
    {
        thetitle = '';
    }


    var Oobj = document.getElementById(oldID);

    /*--------------------------------------------- 菜单html样式

菜单一

'
                     + ''
                     + ''
                     + ''
                     + ''
                     + '

'+icon+'

'+word+'

'

    Oobj.rows(0).insertCell().innerHTML = TempTableStr


    document.body.insertAdjacentHTML('beforeEnd','

');

}

//---------------- 生成连接 makeTopLink 方法 ------------//
function makeTopLink(subID,oldID,word,icon,url,target,thetitle)
{


    var thelink = '';

    if(icon&&icon!="")
    {
        icon = '

';
    }
    else
    {
        icon = '';
    }

    if(!thetitle||thetitle=="")
    {
        thetitle = '';
    }


    if(url&&url!="")
    {
        thelink += '
        if(target&&target!="")
        {
            thelink += ' ';+target+'" '"'
        }

    var Oobj = document.getElementById(oldID);


    /*--------------------------------------------- 连接html样式

     >

连接一


    --------------------------------------------------*/

    var TempTableStr = ''
                     + ''
                     + ''
                     + ''
                     + ''
                     + '

'+icon+'

'+thelink+''+word+'

'

    Oobj.rows(0).insertCell().innerHTML = TempTableStr

}

//*******************************************************************//

//-------------- 菜单对象 addMenu 方法 ------------//
function addMenu(word,icon,url,target,title)
{
    var subID = this.id + "_" + this.length;
    var subObj = this.obj+"["+this.length+"]";

    var oldID = this.id;

    eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");

     makeMenu(subID,oldID,word,icon,url,target,title);

     this.length++;

}

//------------- 菜单对象 addLink 方法 -------------//
function addLink(word,icon,url,target,title)
{
    var subID = this.id + "_" + this.length;
    var oldID = this.id;

     makeLink(subID,oldID,word,icon,url,target,title);

     this.length++;
}

//------------ 菜单对象 addHR 方法 -----------------//
function addHR()
{
    var oldID = this.id;

    var Oobj = document.getElementById(oldID);

    Oobj.insertRow();

    /*------------------------------------------

    --------------------------------------------*/


    Oobj.rows(Oobj.rows.length-1).insertCell();

    with(Oobj.rows(Oobj.rows.length-1))
    {
        cells(0).colSpan= 4;
        cells(0).insertAdjacentHTML('beforeEnd','

');
    }

}

//-------------- 生成菜单 makeMenu 方法 -----------//
function makeMenu(subID,oldID,word,icon,url,target,thetitle)
{
    var thelink = '';


    if(icon&&icon!="")
    {
        icon = '

';
    }
    else
    {
        icon = '';
    }

    if(!thetitle||thetitle=="")
    {
        thetitle = '';
    }


    if(url&&url!="")
    {
        thelink += '
        if(target&&target!="")
        {
            thelink += ' ';+target+'" '"'
        }

    var Oobj = document.getElementById(oldID);

    /*--------------------------------------------- 菜单html样式

     >

菜单一
4


    --------------------------------------------------*/

    Oobj.insertRow();


    with(Oobj.rows(Oobj.rows.length-1))
    {
        id             = "tr"+subID;
        className    = "menutrout";

        title = thetitle;

    }

    eventObj = "tr"+subID;

    eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');
    eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');

    var trObj = eval(eventObj);

    for(i=0;i<4;i++)
    {
        trObj.insertCell();
    }

    with(Oobj.rows(Oobj.rows.length-1))
    {
        cells(0).className = "menutd0";
        cells(0).innerHTML = icon;

        cells(1).innerHTML = thelink+''+word+'';
        cells(1).calssName = "indentWord"

        cells(2).className = "menutd1";
        cells(2).innerHTML = "4";

        cells(3).className = "menutd2";
        cells(3).innerText = " ";

    }



    document.body.insertAdjacentHTML('beforeEnd','

');



}

//---------------- 生成连接 makeLink 方法 ------------//
function makeLink(subID,oldID,word,icon,url,target,thetitle)
{


    var thelink = '';

    if(icon&&icon!="")
    {
        icon = '

连接一


    --------------------------------------------------*/

    Oobj.insertRow();


    with(Oobj.rows(Oobj.rows.length-1))
    {
        id             = "tr"+subID;
        className    = "menutrout";
        title = thetitle;

    }

    eventObj = "tr"+subID;

    eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');
    eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');
    eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');

    var trObj = eval(eventObj);

    for(i=0;i<4;i++)
    {
        trObj.insertCell();
    }

    with(Oobj.rows(Oobj.rows.length-1))
    {
        cells(0).className = "menutd0";
        cells(0).innerHTML = icon;

        cells(1).innerHTML = thelink+''+word+'';

        cells(2).className = "linktd1";
        cells(2).innerText = " ";

        cells(3).className = "menutd2";
        cells(3).innerText = " ";

    }

}

//--------- MtrOver(obj,isTop)-------------------//
function MtrOver(obj,isTop)
{
if(isTop)
{
        var sonid = obj.id.substring(2,obj.id.length);

        var topobj = obj.parentElement.parentElement;

        NowSubMenu = topobj.id;

        if(obj.className=="menutrout")
        {
            mouseWave();
        }

        HideMenu(1);

        SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

        if(isTop)
        {
            ShowTheMenu(sonid,100)
        }
        else
        {
                ShowTheMenu(sonid,MPreturn(sonid))
        }

        SubMenuList[returnIndex(obj.id)] = sonid;

        if(topobj.oldTR)
        {
            eval(topobj.oldTR+'.className = "menutrout"');
        }

        obj.className = "menutrin";

        topobj.oldTR = obj.id;
}
else
{
    return sub_over;

    function sub_over()
    {

        var sonid = obj.id.substring(2,obj.id.length);

        var topobj = obj.parentElement.parentElement;

        NowSubMenu = topobj.id;

        if(obj.className=="menutrout")
        {
            mouseWave();
        }

        HideMenu(1);

        SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

        if(isTop)
        {
            ShowTheMenu(sonid,100)
        }
        else
        {
                ShowTheMenu(sonid,MPreturn(sonid))
        }

        SubMenuList[returnIndex(obj.id)] = sonid;

        if(topobj.oldTR)
        {
            eval(topobj.oldTR+'.className = "menutrout"');
        }

        obj.className = "menutrin";

        topobj.oldTR = obj.id;


    }
}
}

//--------- LtrOver(obj,isTop)-------------------//
function LtrOver(obj,isTop)
{
if(isTop)
{
        var topobj = obj.parentElement.parentElement;

        NowSubMenu = topobj.id;

        HideMenu(1);

        SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

        if(topobj.oldTR)
        {
            eval(topobj.oldTR+'.className = "menutrout"');
        }

        obj.className = "menutrin";

        topobj.oldTR = obj.id;
}
else
{
    return sub_over;

    function sub_over()
    {
        var topobj = obj.parentElement.parentElement;

        NowSubMenu = topobj.id;

        HideMenu(1);

        SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;

        if(topobj.oldTR)
        {
            eval(topobj.oldTR+'.className = "menutrout"');
        }

        obj.className = "menutrin";

        topobj.oldTR = obj.id;

    }
}
}

//--------- LtrOut(obj,isTop)-------------------//
function LtrOut(obj,isTop)
{
if(isTop)
{
        var topobj = obj.parentElement.parentElement;

        obj.className = "menutrout";

        topobj.oldTR = false;

}
else
{
    return sub_out;

    function sub_out()
    {
        var topobj = obj.parentElement.parentElement;

        obj.className = "menutrout";

        topobj.oldTR = false;
    }
}
}

//----------MtrClick(obj,isTop)-----------------//

function MtrClick(obj,isTop)
{

if(isTop)
{
        if(obj.cells(1).all.tags("A").length>0)
        {
            obj.cells(1).all.tags("A")(0).click();
        }
}
else
{
    return sub_click;

    function sub_click()
    {
        if(obj.cells(1).all.tags("A").length>0)
        {
            obj.cells(1).all.tags("A")(0).click();
        }

    }
}
}

//----------TMtrClick(obj)-----------------//

function TMtrClick(obj)
{
    if(obj.MH)
    {
        MtrOver(obj,1)

        obj.MH = false;
    }
    else
    {
        document.onmouseup()

        obj.MH = true;
    }
}

//---------- returnIndex(str)--------------//

function returnIndex(str)
{
    return (str.split("_").length-3)
}

//---------ShowTheMenu(obj,num)-----------------//

function ShowTheMenu(obj,num)
{
    var topobj = eval(obj.substring(0,obj.length-2));



    var SrcObj = eval(topobj.id.split("_")[1])


    var ML = 0
    if(SrcObj.L)
    {
        ML            += eval(SrcObj.L)
    }
    var MT = 0
    if(SrcObj.T)
    {
        MT            += eval(SrcObj.T)
    }


    var trobj = eval("tr"+obj);

    var obj = eval(obj);

    var TheTDLeft = trobj.parentElement.parentElement.parentElement.offsetLeft;


    if(num==0)
    {
        with(obj.style)
        {
            pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;
            pixelTop = topobj.style.pixelTop + trobj.offsetTop;
        }
    }
    if(num==1)
    {
        with(obj.style)
        {
            pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;
            pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
        }
    }
    if(num==2)
    {
        with(obj.style)
        {
            pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
            pixelTop = topobj.style.pixelTop + trobj.offsetTop;
        }
    }
    if(num==3)
    {
        with(obj.style)
        {
            pixelLeft = topobj.style.pixelLeft - obj.offsetWidth;
            pixelTop = topobj.style.pixelTop + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
        }
    }

    if(num==100)
    {
        with(obj.style)
        {
            pixelLeft = document.body.scrollLeft + topobj.offsetLeft + TheTDLeft + ML;
            pixelTop = document.body.scrollTop + topobj.offsetTop + topobj.offsetHeight + MT;
        }
    }

    obj.style.visibility = "visible";

    if(obj.alphaing)
    {
        clearInterval(obj.alphaing);
    }

    obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
}

//----------HideMenu(num)-------------------//

/*----------------------
var SubMenuList = new Array();

var NowSubMenu = "";

---------------------*/

function HideMenu(num)
{
    var thenowMenu = "";

    var obj = null;

    if(num==1)
    {
        thenowMenu = NowSubMenu
    }



    for(i=SubMenuList.length-1;i>=0;i--)
    {
        if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu)
        {

            obj = eval(SubMenuList[i]);

            if(obj.alphaing)
            {
                clearInterval(obj.alphaing);
            }

            obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);

            obj.style.visibility = "hidden";        //-----如果想缓慢隐藏，请去掉这项---------------//------------//

            eval("tr"+SubMenuList[i]).className = "menutrout";

            SubMenuList[i] = null;
        }
        else
        {
            if(SubMenuList[i]==thenowMenu)
            {
                return;
            }
        }
    }

    NowSubMenu = "";
}

//-----------MenuPosition return(obj)--------------//

function MPreturn(obj)
{
    var topobj = eval(obj.substring(0,obj.length-2));

    var trobj = eval("tr"+obj);

    var x = topobj.style.pixelLeft + topobj.offsetWidth;
    var y = topobj.style.pixelTop + trobj.offsetTop;

    obj = eval(obj);

    var judgerY = obj.offsetHeight + y;
    var judgerX = obj.offsetWidth + x;

    var py = 0;
    var px = 0;

    if(judgerY>=document.body.clientHeight)
    {
        py = 1;
    }

    if(judgerX>= document.body.clientWidth)
    {
        px = 2;
    }

    return (px+py);
}

//-----------mouseWave()-------------//

function mouseWave()
{
    if(mouseCanSound)
    {
        theBS.src= "sound.wav";
    }
}

//----------- menu_alpha_down -------//

function menu_alpha_down(obj,num)
{
        var obj = eval(obj);

        if(obj.filters.Alpha.Opacity > 0 )
        {
            obj.filters.Alpha.Opacity += -num;
        }
        else
        {
            clearInterval(obj.alphaing);
            obj.filters.Alpha.Opacity = 0;
            obj.alphaing = false;
            obj.style.visibility = "hidden";
        }
}

//------------ menu_alpha_up --------//

function menu_alpha_up(obj,num)
{
        var obj = eval(obj);

        if(obj.filters.Alpha.Opacity<100)
            obj.filters.Alpha.Opacity += num;
        else
        {
            clearInterval(obj.alphaing);
            obj.filters.Alpha.Opacity = 100;
            obj.alphaing = false;
        }
}

//---------- IE mouseup --------//

function document.onmouseup()
{
    HideMenu();
}

var TM = new TopMenu("TM")

TM.addTopLink("红色代码",1,"javascript:alert('为你献上最好的javascript脚本')")
TM.addTopMenu("下拉菜单1",1)
    TM[1].addLink("hello",0,"javascript:alert();")
    TM[1].addLink("hello",0,"javascript:;")
    TM[1].addMenu("hello")
        TM[1][2].addLink("hello",0,"javascript:;")
        TM[1][2].addLink("hello",0,"javascript:;")
        TM[1][2].addLink("hello",0,"javascript:;")
        TM[1][2].addLink("hello",0,"javascript:;")
    TM[1].addLink("hello",0,"javascript:;")
        TM[1].addHR()
    TM[1].addMenu("hello")
        TM[1][4].addLink("hello",0,"javascript:;")
        TM[1][4].addLink("hello",0,"javascript:;")
        TM[1][4].addLink("hello",0,"javascript:;")
        TM[1][4].addLink("hello",0,"javascript:;")
TM.addTopLink("链接",0,"javascript:alert()")
TM.addTopMenu("下拉菜单2")
    TM[3].addLink("hello",0,"javascript:alert();")
    TM[3].addLink("hello",0,"javascript:;")
    TM[3].addLink("hello",0,"javascript:;")
    TM[3].addMenu("hello")
        TM[3][3].addLink("hello",0,"javascript:;")
        TM[3][3].addLink("hello",0,"javascript:;")
        TM[3][3].addLink("hello",0,"javascript:;")
        TM[3][3].addLink("hello",0,"javascript:alert();")
TM.returnAll("document.body") //生成在 document.body里面
-------------------------------------------------------------------

希望一起学习JS!!!