zoukankan      html  css  js  c++  java
  • 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;  100%; height: 100%; text-align: center;">' +
    						'<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%;  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

  • 相关阅读:
    LaTeX不能识别eps文件?
    ubuntu 11.04系统清理(不断更新。。。)
    换Ubuntu邮件客户端Evolution为Thunderbird
    Byobu:打造多任务的Terminal
    Learning the Vi Editor, 6th Edition学习笔记(1)
    Ubuntu:让桌面显示回收站
    3rd Party Repository for Dropbox
    ubuntu 显示隐藏文件
    Ubuntu下的一款Dock工具AWN
    i686和x86_64的区别
  • 原文地址:https://www.cnblogs.com/webdm/p/2037374.html
Copyright © 2011-2022 走看看