JS打字效果的动态菜单代码分享

这是一款基于javascript实现的打字效果的动态菜单特效代码，分享给大家学习学习。
运行效果图：----------------------查看效果-----------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的JS打字效果的动态菜单代码如下
<html><head><title>JS打字效果的动态菜单</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><script type="text/javascript"><！--// ===========================================================//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 spacefor （var n = 0; n < hs; n ++）{c = "<br>";this.textT.push（c）;}// hrefvar h1 = （href ！= ""） ? "<a href="" + href + """ + （tg ? " target ="" + tg + """ : ""） +">" : "";var h2 = （href ！= ""） ? "</a>" : "";// download imagethis.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 = "<br>";}k ++;if （m ！= ""）{this.textT.push（m）;} } } // ---- title click event ---- this.click = function（） { // clear node & children function clearNode（theNode, clearTitle） {// recursive callfor （var i = theNode.child.length - 1; i >= 0; i --）{clearNode（theNode.child[i], true）;}// clear selected styletheNode.spanTitle.className = "title";if （clearTitle）{// clear titletoff.push（[theNode, 0]）;}if （theNode.visibility）{// clear contenttoff.push（[theNode, 1]）;theNode.visibility = false;} } // Node not being displayed if （sD == false） {if （ ！ this.visibility）{// style selectedthis.spanTitle.className = "title selected";// ---- clear nodefor （var i in node）{ if （i ！= this.N && node[i].level == this.level && node[i].visibility） { clearNode（node[i], false）; }}// ---- display nodedisp.push（[this, 1]）; // contentfor （var i = 0, len = this.child.length; i < len; i ++）{ disp.push（[this.child[i], 0]）; // children titles}this.visibility = true;} } else {// waiting loopsetTimeout（"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 displayp = 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 titlesT = false;}else{// something to clearsT = p[1] ? p[0].spanText: p[0].spanTitle;// init unloading tagclt = false;if （sT.firstChild && sT.firstChild.data == "1"）{ clt = sT.firstChild; clt.innerHTML = "?<";}// unless not yet displayedif （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"> <span class="node">**** TELETYPE MENU V1 ****<br>16K RAM SYSTEM 7892 BASIC BYTES FREE<br> READY.<br><br> Hello. Please select an option: <br><br> </span> <span class="node" title="[E-mail]"> <span class="node" title="[Inbox]"> You have 3 messages waiting.<span class="node" title="[Truman McCollum]"><br>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.<br></span><span class="node" title="[Encyclopedic L. Rills]"><br>YOU"VE HEARD ABOUT IT<br>YOU"VE READ ABOUT IT<br>YOU"VE SEEN IT ON TV<br>AND NOW IT"S FINALLY HERE！<br>THE MOST EFFECTIVE WEIGHT-LOSS INGREDIENT EVER TO HIT THE MARKET IS NOW AVAILABLE FROM NITHRUTHON！！！！<br></span><span class="node" title="[Punitive H. Unpolluted]"><br>Get the Finest Rulex Watch Replica！<br>- Replicated to the Smallest Detail<br>- 98% Perfectly Accurate Markings<br>- perfect as a gift for your colleagues and friends<br>- free gift box<br>Make your order before the prices go up！！！！！<br> </span> </span> <span class="node" title="[Outbox]">There are no items to show in this view. </span> </span> <span class="node" title="[Images]"> <span class="node" title="[My laptop]">Yes I know, I should upgrade... <img src="80552_brd.gif"></span> <span class="node" title="[Me]">404 error... <img src="Foucault.gif"></span> <span class="node" title="[colors]">Color schemes<span class="node" title="[green]"><a target="_blank" href="http://www.dhteumeuleu.com"><img src="03_green.gif"></a></span><span class="node" title="[olive]"><img src="olive.gif"><img src="olive.gif"></span><span class="node" title="[october]"><img src="october2.gif"></span> </span> </span> <span class="node" title="[Quotes]"> <span class="node" title="[01]">And why use a GUI when you can perl -e "$n=1; while （$n++） {print "
$n" if （"p" x $n） ！~ /^（（p）2+）1+$/ and "$n" eq reverse "$n"}"?<span class="node" title="[run]">[an error occurred while processing this directive]</span> </span> <span class="node" title="[02]">Cogito cogito ergo cogito sum. I think that I think, therefore I think that I am. </span> <span class="node" title="[03]">Computer"s rule:<span class="node" title="[Rule #1]">My computer is always right, the human is always the problem ..</span><span class="node" title="[Rule #2]">See Rule #1</span> </span> </span> <span class="node"> --<br>Best viewed on my computer. </span></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>
以上就是为大家分享的JS打字效果的动态菜单代码，希望大家可以喜欢。