编程 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 相关文章推荐

JavaScript 撑出页面文字换行

Jun 15 Javascript

onmouseover和onmouseout的一些问题思考

Aug 14 Javascript

页面图片浮动左右滑动效果的简单实现案例

Feb 10 Javascript

javascript实现存储hmtl字符串示例

Apr 25 Javascript

JavaScript实现点击文字切换登录窗口的方法

May 11 Javascript

封装好的javascript前端分页插件pagination

Jan 04 Javascript

微信小程序基础知识css样式media标签

Feb 15 Javascript

利用node.js如何搭建一个简易的即时响应服务器

May 28 Javascript

在vue项目中使用md5加密的方法

Sep 14 Javascript

手淘flexible.js框架使用和源代码讲解小结

Oct 15 Javascript

VUE安装使用教程详解

Jun 03 Javascript

vue路由切换时取消之前的所有请求操作

Sep 01 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