JS超级酷的导航菜单代码

代码简介：

JS超级酷的导航菜单代码，类似WINDOWS风格的导航，又又立体效果，很不错的，赶快运行一下，一睹为快吧。

代码内容：

?
<HTML>
<HEAD>
<TITLE>JS超级酷的导航菜单代码_网页代码站(www.webdm.cn)</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
 
<SCRIPT  type=text/javascript>
 
var dragobject = null;
var tx;
var ty;
 
function getReal(el) {
    temp = el;
 
    while ((temp != null) && (temp.tagName != "BODY")) {
        if ((temp.className == "moveme") || (temp.className == "handle")){
            el = temp;
            return el;
        }
        temp = temp.parentElement;
    }
    return el;
}
 
 
function moveme_onmousedown() {
    el = getReal(window.event.srcElement)
    if (el.className == "moveme") {
        dragobject = el;
        ty = (window.event.clientY - dragobject.style.pixelTop);
        tx = (window.event.clientX - dragobject.style.pixelLeft);
        window.event.returnValue = false;
        window.event.cancelBubble = true;
    }
    else if (el.className == "handle") {
        tmp = el.getAttribute("for");
        if (tmp != null) {
            el = eval(tmp);
            dragobject = el;
            ty = (window.event.clientY - dragobject.style.pixelTop);
            tx = (window.event.clientX - dragobject.style.pixelLeft);
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        else {
            dragobject = null;
        }
    }
    else {
        dragobject = null;
    }
}
 
function moveme_onmouseup() {
    if(dragobject) {
        dragobject = null;
    }
}
 
function moveme_onmousemove() {
    if (dragobject) {
        if(window.event.clientX >= 0) {
            dragobject.style.left = window.event.clientX - tx;
            dragobject.style.top = window.event.clientY - ty;
        }
        window.event.returnValue = false;
        window.event.cancelBubble = true;
    }
}
 
if (document.all) { //This only works in IE4 or better
    document.onmousedown = moveme_onmousedown;
    document.onmouseup = moveme_onmouseup;
    document.onmousemove = moveme_onmousemove;
}
 
document.write("<style>");
document.write(".moveme     {cursor: move;}");
document.write(".handle     {cursor: move;}");
document.write("</style>");
</SCRIPT>
 
<SCRIPT  type=text/javascript>
 
document.onmouseover = doOver;
document.onmouseout  = doOut;
document.onmousedown = doDown;
document.onmouseup   = doUp;
 
 
function doOver() {
    var toEl = getReal(window.event.toElement, "className", "coolButton");
    var fromEl = getReal(window.event.fromElement, "className", "coolButton");
    if (toEl == fromEl) return;
    var el = toEl;
     
//  alert(el);
     
//  var cDisabled = el.getAttribute("cDisabled");
    var cDisabled = el.cDisabled;
//  alert(cDisabled);
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    if (el.className == "coolButton")
        el.onselectstart = new Function("return false");
     
    if ((el.className == "coolButton") && !cDisabled) {
        makeRaised(el);
        makeGray(el,false);
    }
}
 
function doOut() {
    var toEl = getReal(window.event.toElement, "className", "coolButton");
    var fromEl = getReal(window.event.fromElement, "className", "coolButton");
    if (toEl == fromEl) return;
    var el = fromEl;
 
//  var cDisabled = el.getAttribute("cDisabled");
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
 
    var cToggle = el.cToggle;
    toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present
 
    if (cToggle && el.value) {
        makePressed(el);
        makeGray(el,true);
    }
    else if ((el.className == "coolButton") && !cDisabled) {
        makeFlat(el);
        makeGray(el,true);
    }
 
}
 
function doDown() {
    el = getReal(window.event.srcElement, "className", "coolButton");
     
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    if ((el.className == "coolButton") && !cDisabled) {
        makePressed(el)
    }
}
 
function doUp() {
    el = getReal(window.event.srcElement, "className", "coolButton");
     
    var cDisabled = el.cDisabled;
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    if ((el.className == "coolButton") && !cDisabled) {
        makeRaised(el);
    }
}
 
 
function getReal(el, type, value) {
    temp = el;
    while ((temp != null) && (temp.tagName != "BODY")) {
        if (eval("temp." + type) == value) {
            el = temp;
            return el;
        }
        temp = temp.parentElement;
    }
    return el;
}
 
function findChildren(el, type, value) {
    var children = el.children;
    var tmp = new Array();
    var j=0;
     
    for (var i=0; i<children.length; i++) {
        if (eval("children[i]." + type + "==\"" + value + "\"")) {
            tmp[tmp.length] = children[i];
        }
        tmp = tmp.concat(findChildren(children[i], type, value));
    }
     
    return tmp;
}
 
function disable(el) {
 
    if (document.readyState != "complete") {
        window.setTimeout("disable(" + el.id + ")", 100);   // If document not finished rendered try later.
        return;
    }
     
    var cDisabled = el.cDisabled;
     
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
 
    if (!cDisabled) {
        el.cDisabled = true;
         
        el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
                        '<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
                        el.innerHTML +
                        '</span>' +
                        '</span>';
 
        if (el.onclick != null) {
            el.cDisabled_onclick = el.onclick;
            el.onclick = null;
        }
    }
}
 
function enable(el) {
    var cDisabled = el.cDisabled;
     
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    if (cDisabled) {
        el.cDisabled = null;
        el.innerHTML = el.children[0].children[0].innerHTML;
 
        if (el.cDisabled_onclick != null) {
            el.onclick = el.cDisabled_onclick;
            el.cDisabled_onclick = null;
        }
    }
}
 
function addToggle(el) {
    var cDisabled = el.cDisabled;
     
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    var cToggle = el.cToggle;
     
    cToggle = (cToggle != null); // If CTOGGLE atribute is present
 
    if (!cToggle && !cDisabled) {
        el.cToggle = true;
         
        if (el.value == null)
            el.value = 0;       // Start as not pressed down
         
        if (el.onclick != null)
            el.cToggle_onclick = el.onclick;    // Backup the onclick
        else
            el.cToggle_onclick = "";
 
        el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
    }
}
 
function removeToggle(el) {
    var cDisabled = el.cDisabled;
     
    cDisabled = (cDisabled != null); // If CDISABLED atribute is present
     
    var cToggle = el.cToggle;
     
    cToggle = (cToggle != null); // If CTOGGLE atribute is present
     
    if (cToggle && !cDisabled) {
        el.cToggle = null;
 
        if (el.value) {
            toggle(el);
        }
 
        makeFlat(el);
         
        if (el.cToggle_onclick != null) {
            el.onclick = el.cToggle_onclick;
            el.cToggle_onclick = null;
        }
    }
}
 
function toggle(el) {
    el.value = !el.value;
     
    if (el.value)
        el.style.background = "URL()";
    else
        el.style.backgroundImage = "";
 
//  doOut(el); 
}
 
 
function makeFlat(el) {
    with (el.style) {
        background = "";
        border = "1px solid buttonface";
        padding      = "1px";
    }
}
 
function makeRaised(el) {
    with (el.style) {
        borderLeft   = "1px solid buttonhighlight";
        borderRight  = "1px solid buttonshadow";
        borderTop    = "1px solid buttonhighlight";
        borderBottom = "1px solid buttonshadow";
        padding      = "1px";
    }
}
 
function makePressed(el) {
    with (el.style) {
        borderLeft   = "1px solid buttonshadow";
        borderRight  = "1px solid buttonhighlight";
        borderTop    = "1px solid buttonshadow";
        borderBottom = "1px solid buttonhighlight";
        paddingTop    = "2px";
        paddingLeft   = "2px";
        paddingBottom = "0px";
        paddingRight  = "0px";
    }
}
 
function makeGray(el,b) {
    var filtval;
     
    if (b)
        filtval = "gray()";
    else
        filtval = "";
 
    var imgs = findChildren(el, "tagName", "IMG");
         
    for (var i=0; i<imgs.length; i++) {
        imgs[i].style.filter = filtval;
    }
 
}
     
 
document.write("<style>");
document.write(".coolBar    {background: buttonface;border-top: 1px solid buttonhighlight;  border-left: 1px solid buttonhighlight; border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");
document.write(".coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
document.write(".coolButton IMG {filter: gray();}");
document.write("</style>");
 
</SCRIPT>
 
<SCRIPT type=text/javascript>
<!--
 
document.onmousedown = initDown;
document.onmouseup   = initUp;
document.onmousemove = initMove;
 
function initDown() {
    doDown();
    moveme_onmousedown();
}
 
function initUp() {
    doUp();
    moveme_onmouseup();
}
 
function initMove() {
    moveme_onmousemove();
}
 
//-->
</SCRIPT>
 
<STYLE type=text/css>BODY {
    FONT-FAMILY: "宋体"; FONT-SIZE: 9pt; MARGIN-TOP: 0px
}
.pt9 {
    FONT-FAMILY: "宋体"; FONT-SIZE: 9pt
}
</STYLE>
 
 
<META content="Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
 
 
<BODY bgColor=#e0dfde leftMargin=0 topMargin=0>
 
<SCRIPT language=JavaScript>
var mylocation="index.htm"
var winheight=100
var winsize=100
var x=5
function go(){
win2=window.open("","","scrollbars")
win2.location=mylocation
if (!document.layers&&!document.all){
win2.location=mylocation
return}
win2.resizeTo(100,100)
win2.moveTo(0,0)
go2()}
function go2(){
if (winheight>=screen.availHeight-3)
x=0
win2.resizeBy(5,x)
winheight+=5
winsize+=5
if (winsize>=screen.width-5){
win2.location=mylocation
winheight=100
winsize=100
x=5
return}
setTimeout("go2()",50)
}
</SCRIPT>
 
 
<DIV align=left>
<TABLE cellPadding=0 class=coolBar id=toolbar1
style="LEFT: 0px; POSITION: relative; TOP: 0px; Z-INDEX: 99" width="100%">
  <TBODY>
  <TR>
    <TD class=coolButton onclick=javascript:history.go(-1)><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/jian.gif" width=16>回上一步</NOBR></TD>
    <TD class=coolButton
    onclick="window.open('/', '_blank')"><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/home.gif" width=16>回到首页</NOBR></TD>
    <TD class=coolButton
    onclick="window.open('/', '_blank')"><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/search.gif" width=16>最新JS脚本</NOBR> </TD>
    <TD class=coolButton
    onclick="window.open('/', 'main')"><NOBR><IMG height=16
      src="http://www.webdm.cn/images/20091114/win16.gif" width=16>JavaApplet</NOBR> </TD>
    <TD class=coolButton
    onclick="window.open('/', 'main')"><NOBR><IMG height=16
      src="http://www.webdm.cn/images/20091114/read.gif" width=16>免费资源</NOBR></TD>
    <TD class=coolButton
    onclick="window.open('/', 'main')"><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/mail.gif" width=16>订阅本站邮件</NOBR> </TD>
    <TD class=coolButton
    onclick="window.open('/', '_blank')"><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/write.gif" width=16>本站留言板</NOBR> </TD>
    <TD class=coolButton
    onclick="window.open('/', 'main')"><NOBR><IMG height=16
      src="http://www.webdm.cn/images/20091114/win16.gif" width=16>本站导航地图</NOBR> </TD>
    <TD class=coolButton
    onclick="window.open('/', '_blank')"><NOBR><IMG
      height=16 src="http://www.webdm.cn/images/20091114/lt.gif" width=16>本站论坛</NOBR>
</TD></TR></TBODY></TABLE></DIV></BODY></HTML>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/1aa50ca7-358e-4ef2-ae7d-ac56957e99a3.html

posted @   网页代码站  阅读(453)  评论(0)  编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示