Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > Dynamic menu code sharing for JS typing effect_javascript skills

Dynamic menu code sharing for JS typing effect_javascript skills

WBOY
Release： 2016-05-16 15:43:43
Original
1507 people have browsed it

这是一款基于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 &#63; "" : this.spanTitle &#63; " " : "";
  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 != "") &#63; "<a href='" + href + "'" + (tg &#63; " target ='" + tg + "'" : "") +">" : "";
    var h2 = (href != "") &#63; "</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] &#63; p[0].spanText : p[0].spanTitle,
  p[1] &#63; p[0].textT : p[0].titleT,
  0,
  p[1] && p[0].spanTitle &#63; 1 : 0
  ];
 }
 }

 // ---- clear node ----
 if (sT != false)
 {
 if (sT.lastChild)
 {
  if (clt != false)
  {
  clt.innerHTML = (clt.innerHTML == "&#63;<") &#63; " <" : "&#63;<";
  }
  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] &#63; p[0].spanText: p[0].spanTitle;
  // init unloading tag
  clt = false;
  if (sT.firstChild && sT.firstChild.data == "1")
  {
   clt = sT.firstChild;
   clt.innerHTML = "&#63;<";
  }
  // 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 != "" &#63; 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"}'&#63;
  <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>
Copy after login

以上就是为大家分享的JS打字效果的动态菜单代码，希望大家可以喜欢。

Related labels：
js
source：php.cn
Previous article：js implementation of select jump menu new window effect code sharing (super simple)_javascript skills Next article：JavaScript method to add array data to Select drop-down box_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Can a workerpool declared in multiple routes still maintain its cpu usage without caring about the threshold I'm hoping to find a node.js system with a workerpool to handle CPU intensive tasks, but I...
From 2024-04-06 19:54:23
0
1
444
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Show hidden side panels: checked I would like to have a navigation menu in the side panel with the ability to switch to vie...
From 2024-04-06 15:49:33
0
1
319
Should we use SSG to deploy dashboards created with Nuxt.js? We will develop a dashboard for internal use using Nuxt.js. Since this will be an internal...
From 2024-04-06 13:17:44
0
1
493
Electron gets AppData on preload How to get the preloaded AppData directory? Background.js[...]asyncfunctioncreateWindow(){...
From 2024-04-06 11:05:31
0
1
417
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template