JS打字效果的动态菜单

2016/4/12

<html>
<head>
<title>www.lanrentuku.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 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" href="http://www.dhteumeuleu.com"><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 id="up" onClick="return false;" onMouseDown="sS=50;dS=-1;return false;" onMouseUp="dS=0;return false;">·</div>
<div id="down" onClick="return false;" onMouseDown="sS=50;dS=1;return false;" onMouseUp="dS=0;return false;">·</div>

</body>
</html>

提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

标签：

下载地址：[大小:]

下载说明：
本站所有素材资源仅供学习与参考，版权为原作者所有，请勿用于商业用途，否则所产生的一切后果将由您自己承担！
极速下载支持各类多线程下载工具(迅雷)、浏览器(360浏览器)等，适合较大文件的下载！
其他普通下载点限制多线程，仅允许直接点击下载的单线程下载方式，适合较小的文件下载！
站内素材资源如有侵犯您的版权，请及时联系我们处理。

JS打字效果的动态菜单

下载地址：[大小:]

相关素材