编程 Javascript

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

Posted in Javascript onAugust 21, 2015

这是一款基于javascript实现的打字效果的动态菜单特效代码，分享给大家学习学习。

运行效果图：----------------------查看效果-----------------------

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

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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打字效果的动态菜单代码分享

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery判断单个复选框是否被选中的代码

Sep 03 Javascript

JavaScript 学习笔记（十四）正则表达式

Jan 22 Javascript

jquery事件机制扩展插件 jquery鼠标右键事件。

Dec 26 Javascript

MooBox 基于Mootools的对话框插件

Jan 20 Javascript

百度地图自定义控件分享

Mar 04 Javascript

javascript去除空格方法小结

May 21 Javascript

Bootstrap3 模态框使用实例

Feb 22 Javascript

vue如何引用其他组件（css和js）

Apr 13 Javascript

easyUI下拉列表点击事件使用方法

May 18 Javascript

vue中的非父子间的通讯问题简单的实例代码

Jul 19 Javascript

Vue.set() this.$set()引发的视图更新思考及注意事项

Aug 30 Javascript

基于JavaScript实现简单抽奖功能代码实例

Oct 20 Javascript

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

Aug 21 #Javascript

jQuery实现动态表单验证时文本框抖动效果完整实例

Aug 21 #Javascript

HTML5之WebSocket入门3 -通信模型socket.io

Aug 21 #Javascript

JavaScript实现为input与textarea自定义hover,focus效果的方法

Aug 21 #Javascript

IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题

Aug 21 #Javascript

jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码

Aug 21 #Javascript

jquery结婚电子请柬特效源码分享

Aug 21 #Javascript