这是一款基于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 space for (var n = 0; n < hs; n ++) { c = "<br>"; 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 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 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> <span> **** TELETYPE MENU V1 ****<br> 16K RAM SYSTEM 7892 BASIC BYTES FREE<br> READY.<br><br> Hello. Please select an option: <br><br> </span> <span title="[E-mail]"> <span title="[Inbox]"> You have 3 messages waiting. <span 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 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 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 title="[Outbox]"> There are no items to show in this view. </span> </span> <span title="[Images]"> <span title="[My laptop]">Yes I know, I should upgrade... <img src="https://www.jb51.net/80552_brd.gif"></span> <span title="[Me]">404 error... <img src="https://www.jb51.net/Foucault.gif"></span> <span title="[colors]">Color schemes <span title="[green]"><a target="_blank" href="https://www.dhteumeuleu.com"><img src="https://www.jb51.net/03_green.gif"></a></span> <span title="[olive]"><img src="https://www.jb51.net/olive.gif"><img src="https://www.jb51.net/olive.gif"></span> <span title="[october]"><img src="https://www.jb51.net/october2.gif"></span> </span> </span> <span title="[Quotes]"> <span title="[01]"> 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"}'? <span title="[run]">[an error occurred while processing this directive]</span> </span> <span title="[02]"> Cogito cogito ergo cogito sum. I think that I think, therefore I think that I am. </span> <span title="[03]"> Computer's rule: <span title="[Rule #1]">My computer is always right, the human is always the problem ..</span> <span title="[Rule #2]">See Rule #1</span> </span> </span> <span> --<br>Best viewed on my computer. </span> </div> <div onMouseDown="sS=50;dS=-1;return false;" onMouseUp="dS=0;return false;">·</div> <div onMouseDown="sS=50;dS=1;return false;" onMouseUp="dS=0;return false;">·</div> </body> </html>
以上就是为大家分享的JS打字效果的动态菜单代码，希望大家可以喜欢。
您可能感兴趣的文章: