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

2019-11-20 11:46:09

字体：大中小

来源：转载

供稿：网友

这是一款基于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 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 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"> <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$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打字效果的动态菜单代码，希望大家可以喜欢。

上一篇：js实现select跳转菜单新窗口效果代码分享(超简单)

下一篇：JS实现表单中checkbox对勾选中增加边框显示效果