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

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

赞 (0)

相关推荐

  • JavaScript多级下拉菜单代码(简单实用)

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

  • 下拉菜单点击实现连接跳转功能的js代码

    1.js代码 复制代码 代码如下: <!-- function MM_jumpMenu(targ,selObj,restore){ eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'"); if (restore) selObj.selectedIndex=0; } --> 2.使用 复制代码 代码如下: <p class="yq">校

  • Javascript实现动态菜单添加的实例代码

    Javascript实现动态菜单添加的实例代码

    先来看看效果: Html源码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <

  • JavaScript结合PHP实现网页制作中双下拉菜单的动态实现

    本文介绍了双下拉菜单的动态实现的代码,例如:在主菜单中有"焦点新闻"."生活时尚"."心情故事"三个选项,通过"焦点新闻"的选择,子菜单自动生成如"国内"."国际"."体育"."文娱",依此类推. 利用javascript,我们可以轻松实现上述效果.但问题是,如果菜单中的选项是从数据库(或其他文件)中动态提取,实现起来就并不是轻而易举的了.笔者根据

  • Js点击弹出下拉菜单效果实例

    复制代码 代码如下: <STYLE type=text/css> .menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR:

  • 一个日期下拉菜单的js实现代码

    一个日期下拉菜单的js实现代码

    1.先看效果图: 2.js代码 year_month_day.js 复制代码 代码如下: year_month_day.js function DateSelector(selYear, selMonth, selDay) { this.selYear = selYear; this.selMonth = selMonth; this.selDay = selDay; this.selYear.Group = this; this.selMonth.Group = this; // 给年份.月份

  • js 单击式的下拉菜单效果实例

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • JavaScript 下拉菜单实现代码

    JavaScript下拉菜单 * { padding:0; margin:0; } body { font-family:verdana, sans-serif; font-size:small; } #navigation, #navigation li ul { list-style-type:none; } #navigation { margin:20px; } #navigation li { float:left; text-align:center; position:relati

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

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

    这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的JS打字效果的动态菜单代码如下 <html> <head> <title>JS打字效果的动态菜单</title> <meta http-equiv="imagetoolbar&

  • JS实现Fisheye效果动感放大菜单代码

    JS实现Fisheye效果动感放大菜单代码

    本文实例讲述了JS实现Fisheye效果动感放大菜单代码.分享给大家供大家参考,具体如下: 这款Fisheye Menu,是采用JS+CSS+XHTML实现的动感放大菜单,放到图标上的时候,图标会被放大,整个菜单有缓冲弹簧的效果,学jQuery的朋友见的比较多,不过本款没有用到jQuery,效果却同样精彩. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fisheye-style-menu-demo/ 具体代码如下: <!DOCTYPE

  • jQuery实现标题有打字效果的焦点图代码

    jQuery实现标题有打字效果的焦点图代码

    本文实例讲述了jQuery实现标题有打字效果的焦点图代码.分享给大家供大家参考,具体如下: 给大家分享一款基于jQuery标题有打字效果的焦点图,具有标题打字形式逐渐显示的功能.这款焦点图适用浏览器有:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-title-print-style-flash-codes/ 完整实例代码代码点击此处本站

  • JS实现的竖向折叠菜单代码

    JS实现的竖向折叠菜单代码

    本文实例讲述了JS实现的竖向折叠菜单代码.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hxzd-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&q

  • js实现网页多级级联菜单代码

    js实现网页多级级联菜单代码

    本文实例讲述了js实现网页多级级联菜单.分享给大家供大家参考.具体如下: 这是大家在网页上经常会见到的级联菜单特效,不过这一个代码是由JS来实现,将级联菜单中的内容保存在了JS数组中,为了页面美观,本次还美化了一下表格边框,整体看上去更和谐实用了,多级的下拉菜单对网页设计来说比较实用. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-table-select-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML

  • jquery简单实现带渐显效果的选项卡菜单代码

    jquery简单实现带渐显效果的选项卡菜单代码

    本文实例讲述了jquery简单实现带渐显效果的选项卡菜单代码.分享给大家供大家参考.具体如下: 带渐显效果的选项卡菜单,使用了jQuery共同完成的效果,鼠标点击选项卡之后,出现渐变(淡入淡出效果),让网页看上去更生动. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-cha-style-tab-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • jQuery实现带延迟效果的滑动菜单代码

    jQuery实现带延迟效果的滑动菜单代码

    本文实例讲述了jQuery实现带延迟效果的滑动菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery的滑动菜单,鼠标移到某菜单项上,菜单的背景可以滑动过来,平滑的滑动效果,炫动的导航效果,相比没有动画的菜单,这款菜单真的挺不错哦. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-delay-style-menu-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • Java实现JS中的escape和UNescape代码分享

    众所周知,JavaScript中escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串.下面,我们就来看看 Java语言中类似JavaScript中的escape() 和unescape() 转码方法,具体代码如下: public class EscapeUnescape { public static String escape(String src) { int i; char j; StringBuffer tmp = new StringBuffer(); tm

  • jQuery垂直多级导航菜单代码分享

    jQuery垂直多级导航菜单代码分享

    这是一款基于jquery实现的垂直导航菜单特效代码,总共有三级,实现效果简单大方,最后一级还可以进行图片展示说明,是一款非常实用的导航菜单特效源码. 效果演示 源码下载 为大家分享的jQuery垂直多级导航菜单代码如下 <head> <title>jQuery垂直多级导航菜单代码</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

  • jQuery三级下拉列表导航菜单代码分享

    jQuery三级下拉列表导航菜单代码分享

    本文实例讲述了jQuery三级下拉列表导航菜单.分享给大家供大家参考.具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单. 运行效果图:             -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery三级下拉列表导航菜单代码如下 <head> <meta

随机推荐