當(dāng)前位置：首頁 > JS代碼 > JS特效代碼 > 導(dǎo)航菜單

JS打字效果的動(dòng)態(tài)菜單

2009-06-05　來源/作者：懶人圖庫　分類：導(dǎo)航菜單　 «»

<html>
<head>
<title>www.cxj168.com</title>
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	body {
		background: #222;
		overflow: hidden;
		line-height: 18px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
	}
	.node {
		margin-left: 30px;
		height: expression(0); /* IE only */
	}
	.title {
		position: relative;
		background: #fff;
		color: #000;
		cursor: pointer;
	}
	.selected {
		background: #f00;
		color: #fff;
	}
	.hover {
		background: #666;
		color: #fff;
	}
	.content {
		position: relative;
		background: #000;
		color: #fff;
	}
	.cursor {
		background: #f00;
		width: 10;
		height: 8;
		font-size: 12px;
	}
	#menu {
		visibility: hidden;
		position: absolute;
		left: 1%;
		top: 1%;
		width: 98%;
		height: 98%;
		background: #000;
		font-family: 'courier new', typewriter, matrix, monospace;
		font-size: 12px;
		overflow: hidden;
	}
	#up {
		position:absolute;
		right:0;
		top:0;
		color:#000;
		background:#fff;
		cursor:pointer;
		font-family: 'courier new', typewriter, matrix, monospace;
		font-size: 18px;
	}
	#down {
		position:absolute;
		right:0;
		bottom:0;
		color:#000;
		background:#fff;
		cursor:pointer;
		font-family: 'courier new', typewriter, matrix, monospace;
		font-size: 18px;
	}
	a {
		text-decoration: none;
		background: #888;
		color: #000;
	}
	img {
		border: none;
	}
	a:hover	{
		text-decoration: none;
		background: #fff;
		color: #000;
	}
</style>

var menu, cMenu;
var cur = false;
var node = [];
var disp = [];
var toff = [];
var sD = false;
var sT = false;
var lD = "|/-\\";
var cls = false;
var clt = false;
var dS = 1;
var sS = 200;

/////////////////////////////////////////////////////////////////////////////////////////

// ---- create node prototype ----
function Cnode(parent, theNode, level)
{
	this.level = level;
	this.child = [];
	this.visibility = false;
	this.N = node.length;
	if (parent == 0)
	{
		// root
		o = cMenu;
	}
	else
	{
		// set children
		o = parent.span;
		parent.child.push(this);
	}
	// create HTML elements
	this.span = document.createElement("div");
	this.span.className = "node";
	if (theNode.title != "")
	{
		this.spanTitle = document.createElement("span");
		this.spanTitle.parent = this;
		this.spanTitle.className = "title";
		this.spanTitle.onclick = new Function("sS=200;dS=1;node[" + this.N + "].click();");
		this.spanTitle.onmousedown = new Function("return false;");
		this.spanTitle.onmouseover = new Function("if(!this.parent.visibility)this.className='title hover'");
		this.spanTitle.onmouseout = new Function("if(!this.parent.visibility)this.className='title'");
		this.span.appendChild(this.spanTitle);
		// split title (no HTML)
		this.titleT = theNode.title.split(" ");
	}
	else
	{
		// no title
		this.spanTitle = false;
		this.visibility = true;
		this.titleT = "";
	}
	this.spanText = document.createElement("span");
	this.spanText.className = "content";
	this.span.appendChild(this.spanText);
	o.appendChild(this.span);

// remove children nodes
	var temp = theNode.cloneNode(true);
	var ti = 24;
	var li = 0;
	var h = 0;
	var href = "";
	var tg = "";
	for (var i = 0; i < temp.childNodes.length; i ++)
	{
		theNodeChild = temp.childNodes[i];
		if (theNodeChild.className == "node")
		{
			temp.removeChild(theNodeChild);
			i --;
		}
	}
	// split content (don't break HTML tags)
	this.textT = [];
	var i = 0;
	var k = - 1;
	var txt = temp.innerHTML + " ";
	if (txt == " ")
	{
		this.textT.push(" ");
	}
	else
	{
		while (i < txt.length - 1 && k < 10)
		{
			c = txt.charAt(i);
			m = i ? "" : this.spanTitle ? " " : "";
			if (c != " ")
			{
				do
				{
					c = txt.charAt(i);
					if (c == "<")
					{
						j = txt.indexOf(">", i);
						c = txt.substring(i, j + 1);
						i = j;
						// ---- hyperlink images
						if (c.substring(0, 2).toLowerCase() == "<a")
						{
							tg = /target="(.*)" /.exec(c);
							if (tg) tg = tg[1]; else
							{
								tg = /target=(.*)>/.exec(c);
								if (tg) tg = tg[1];
							}
							href = /href="(.*)"/.exec(c)[1];
						}
						// ---- image
						if (c.substring(0, 4).toLowerCase() == "<img")
						{
							var img = document.createElement("img");
							s = /src="(.*)"/.exec(c)[1];
							img.src = s;
							var hs = Math.max(0, img.height - (h * 10)) / 16;
							h = Math.round(img.height / 10);
							// free space
							for (var n = 0; n < hs; n ++)
							{
								c = " ";
								this.textT.push(c);
							}
							// href
							var h1 = (href != "") ? "<a href='" + href + "'" + (tg ? " target ='" + tg + "'" : "") +">" : "";
							var h2 = (href != "") ? "</a>" : "";
							// download image
							this.textT.push(h1);
							for (var n = 0; n < 10; n ++)
							{
								c = h1 + "<img style='position:absolute;left:" + li + "px;top:" + 24 + "px;clip:rect(" + (n * h) + " auto " + ((n + 1) * h) + " auto)' src='" + s + "'>" + h2;
								this.textT.push(c);
							}
							ti += h * 11;
							li += img.width + 10;
						}
					}
					m += c;
					i ++;
					k = 0;
				}
				while (c != " ");
				href = "";
				c = " ";
			}
			k ++;
			if (m != "")
			{
				this.textT.push(m);
			}
		}
	}

// ---- title click event ----
	this.click = function()
	{
		// clear node & children
		function clearNode(theNode, clearTitle)
		{
			// recursive call
			for (var i = theNode.child.length - 1; i >= 0; i --)
			{
				clearNode(theNode.child[i], true);
			}
			// clear selected style
			theNode.spanTitle.className = "title";
			if (clearTitle)
			{
				// clear title
				toff.push([theNode, 0]);
			}
			if (theNode.visibility)
			{
				// clear content
				toff.push([theNode, 1]);
				theNode.visibility = false;
			}
		}

// Node not being displayed
		if (sD == false)
		{
			if ( ! this.visibility)
			{
				// style selected
				this.spanTitle.className = "title selected";
				// ---- clear node
				for (var i in node)
				{
					if (i != this.N && node[i].level == this.level && node[i].visibility)
					{
						clearNode(node[i], false);
					}
				}
				// ---- display node
				disp.push([this, 1]); // content
				for (var i = 0, len = this.child.length; i < len; i ++)
				{
					disp.push([this.child[i], 0]); // children titles
				}
				this.visibility = true;
			}
		}
		else
		{
			// waiting loop
			setTimeout("node[" + this.N + "].click();", 64);
		}
	}
}

/////////////////////////////////////////////////////////////////////////////////////////

// ---- display routine ----
function screenUpdate()
{
	// ---- display node ----
	if (sD != false)
	{
		// remove cursor
		if (cur)
		{
			sD[0].removeChild(cur);
			cur = false;
		}
		// insert loading sign
		if (sD[3] && ! sD[2])
		{
			cls = document.createElement("span");
			cls.data = "1";
			sD[0].appendChild(cls);
		}
		// display text
		txt = document.createElement("span");
		txt.innerHTML = sD[1][sD[2] ++];
		if (sD[2] < sD[1].length)
		{
			txt.innerHTML += " ";
		}
		sD[0].appendChild(txt);
		// cursor
		cur = document.createElement("span");
		cur.className = "cursor";
		cur.innerHTML = " ";
		sD[0].appendChild(cur);
		// rotate loading sign
		if (cls)
		{
			cls.innerHTML = " " + lD.charAt(sD[2] % 4);
		}
		// done
		if (sD[2] >= sD[1].length)
		{
			if (cur)
			{
				sD[0].removeChild(cur);
				cur = false;
			}
			if (cls)
			{
				cls.innerHTML = " >";
				cls = false;
			}
			sD = false;
		}
	}
	else
	{
		// read buffer
		if (disp[0] != undefined)
		{
			// something to display
			p = disp.shift();
			sD = [
				p[1] ? p[0].spanText : p[0].spanTitle,
				p[1] ? p[0].textT : p[0].titleT,
				0,
				p[1] && p[0].spanTitle ? 1 : 0
			];
		}
	}

// ---- clear node ----
	if (sT != false)
	{
		if (sT.lastChild)
		{
			if (clt != false)
			{
				clt.innerHTML = (clt.innerHTML == "?<") ? " <" : "?<";
			}
			sT.removeChild(sT.lastChild);
		}
		else
		{
			sT = false;
		}
	}
	else
	{
		// read buffer
		if (toff[0] != undefined)
		{
			p = toff.shift();
			if ( ! p[0].spanTitle)
			{
				// do not clear node w/o title
				sT = false;
			}
			else
			{
				// something to clear
				sT = p[1] ? p[0].spanText: p[0].spanTitle;
				// init unloading tag
				clt = false;
				if (sT.firstChild && sT.firstChild.data == "1")
				{
					clt = sT.firstChild;
					clt.innerHTML = "?<";
				}
				// unless not yet displayed
				if (sT.innerHTML == "")
				{
					sT = false;
				}
			}
		}
	}
	// auto-scrolling
	menu.scrollTop+=dS*Math.round((menu.scrollHeight-menu.scrollTop+menu.offsetHeight)/sS);
	// 15.625 hertz loop
	setTimeout("screenUpdate()", 64);
}

/////////////////////////////////////////////////////////////////////////////////////////

onload = function()
{
	// ---- create node objects ----
	function setMenuTree(theNode, level, parent)
	{
		if (theNode.className == "node")
		{
			parent = new Cnode(parent, theNode, level ++);
			node.push(parent);
		}
		// recursive call
		for (var i = 0, len = theNode.childNodes.length; i < len; i ++)
		{
			setMenuTree(theNode.childNodes[i], level, parent);
		}
	}

// ---- initialize menu
	menu = document.getElementById("menu");
	cMenu = document.createElement("span");
	setMenuTree(menu, 0, 0);
	menu.innerHTML = "";
	menu.appendChild(cMenu);
	menu.style.visibility = "visible";

// ---- display titles
	for (i in node)
	{
		if (node[i].level == 0)
		{
			disp.push([node[i], node[i].titleT != "" ? 0 : 1]);
		}
	}

screenUpdate();
}

/////////////////////////////////////////////////////////////////////////////////////////
//-->
</script>
</head>

<body>
<div class="ok2a0ga" id="menu">
	
		 **** TELETYPE MENU V1 **** 
		 16K RAM SYSTEM 7892 BASIC BYTES FREE 
		READY. 
		Hello. Please select an option:
		 
	
	
		 You have 3 messages waiting.
			 I have always worried about my size. 3 months ago I found The Extender. I could not believe the results of this device. I am back to wearing it again and I'm still getting larger! My girlfriend says it is the best product I've ever bought. 
			 YOU'VE HEARD ABOUT IT YOU'VE READ ABOUT IT YOU'VE SEEN IT ON TV AND NOW IT'S FINALLY HERE! THE MOST EFFECTIVE WEIGHT-LOSS INGREDIENT EVER TO HIT THE MARKET IS NOW AVAILABLE FROM NITHRUTHON!!!! 
			 Get the Finest Rulex Watch Replica! - Replicated to the Smallest Detail - 98% Perfectly Accurate Markings - perfect as a gift for your colleagues and friends - free gift box Make your order before the prices go up!!!!! 
	
		
		
			There are no items to show in this view.

Yes I know, I should upgrade... <img src="80552_brd.gif">
		404 error... <img src="Foucault.gif">
		Color schemes
			<a target="_blank" ><img src="03_green.gif"></a>
			<img src="olive.gif"><img src="olive.gif">
			<img src="october2.gif">
		
	
	
		
			And why use a GUI when you can perl -e '$n=1; while ($n++) {print "\n$n" if ("p" x $n) !~ /^((p)\2+)\1+$/ and "$n" eq reverse "$n"}'?
			[an error occurred while processing this directive]
		
		
			Cogito cogito ergo cogito sum. I think that I think, therefore I think that I am.
		
		
			Computer's rule:
			My computer is always right, the human is always the problem ..
			See Rule #1
		
	
	
		-- Best viewed on my computer.
	
</div>
<div class="is0aamu" id="up" onClick="return false;" onMouseDown="sS=50;dS=-1;return false;" onMouseUp="dS=0;return false;">·</div>
<div class="2iwwygc" id="down" onClick="return false;" onMouseDown="sS=50;dS=1;return false;" onMouseUp="dS=0;return false;">·</div>

</body>
</html>

運(yùn)行代碼保存代碼提示：您可以先修改部分代碼再運(yùn)行，保存代碼功能在Firefox下無效。

標(biāo)簽：導(dǎo)航菜單