这篇文章主要介绍了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.100sucai.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打字效果的动态菜单代码分享的更多相关文章

  1. js打字效果

    //文字依次出来效果 $.fn.autotype = function() { var $text = $(this); // console.log('this', this); var str = ...

  2. Python12期培训班-day1-三级菜单代码分享

    #!/usr/bin/env python3 import sys import os zonecode = { '广东省': {'广州市':['越秀区','海珠区','荔湾区','天河区'], '深 ...

  3. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  4. 20款jquery下拉导航菜单特效代码分享

    20款jquery下拉导航菜单特效代码分享 jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应 ...

  5. 最近比较迷flash professional cc 做PPT，做一个flash做动态打字效果的教程

    想做一个flash打字效果.网上的方法要不是太繁琐,要不然就是各种遗漏.在这边做一个行之有效的flash做打字效果教程. 首先我用的是最新版本的flash professional cc .但是应该和 ...

  6. Js实现京东无延迟菜单效果(demo)

    一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...

  7. Vue.js递归组件实现动态树形菜单

    使用Vue递归组件实现动态菜单 现在很多项目的菜单都是动态生成的,之前自己做项目也是遇到这种需求,翻看了官网案例,和网上大神的案例.只有两个感觉,官网的案例太简洁,没有什么注释,看起来不太好理解,大神 ...

  8. JavaScript实现动态打字效果

    废话不多说,上代码~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  9. html + css 实现无需 js 的打字效果

    以前要达到类似在电脑上打字的效果,需要 js+html.今天我将介绍一种新方法.本文主要介绍纯 html+css 实现打字效果,有一定的参考价值,大家可以学习一下.提供所有代码,可以直接使用. 一.原 ...

随机推荐

  1. IE6中position:fixed无效问题解决

    在做页面右下脚对话框时,直接使用position:fixed;大部分浏览器很容易就能做到,但是在IE6中却发现不行,原来是IE6不支持position:fixed;这个属性. 虽然用JS肯定能解决这个 ...

  2. STL Container和ATL智能包裹类的冲突

    STL Container和ATL智能包裹类的冲突 载自:http://www.codesky.net/article/200504/63245.html Article last modified ...

  3. AutoLayout的三种设置方式之——NSLayoutConstraint代码篇

    AutoLayout是从IOS 6开始苹果引入来取代autoresizing的新的布局技术,该技术有三种设置方式,等下我来为大家一一叙述一下. 在说三种设置方式前,我们先简单的说一下autolayou ...

  4. ACCESS的System.Data.OleDb.OleDbException: INSERT INTO 语句的语法错误

    一直用的是SQL 数据库,突然改用Access了,使用起来就是没有SQL 顺畅,老是出来些意想不到的错误.今天用Access做的网站程序进行添加数据,调试了一下午,总是异常…… 提示ACCESS的Sy ...

  5. 基于python yield机制的异步操作同步化编程模型

    又一个milestone即将结束,有了些许的时间总结研发过程中的点滴心得,今天总结下如何在编写python代码时对异步操作进行同步化模拟,从而提高代码的可读性和可扩展性. 游戏引擎一般都采用分布式框架 ...

  6. HTML 5中的文件处理之FileAPI(转载)

    原文地址:http://developer.51cto.com/art/201202/319435.htm 在众多HTML5规范中,有一部分规范是跟文件处理有关的,在早期的浏览器技术中,处理小量字符串 ...

  7. 运行maven报错:经过检查是因为maven不兼容jdk1.6,重新安装1.7解决

    cmd mvn -v报错: Exception in thread "main" java.lang.UnsupportedClassVersionError: org/apach ...

  8. BootstrapDialog自动加<br> BUG处理

    用惯了其他的ui框架 ,综合感觉BootstrapDialog算是最好的一个了. 因为不想在js中写过多的html代码,所以习惯的写法,把代码写在html中,js引用 实例如下: html代码 < ...

  9. zedboard之GPIO驱动（从FPGA一直到LINUX应用）

    1 EDK 大家知道我们在EDK中建立GPIO然后倒出到SDK中,在SDK中可以用C语言操作外设GPIO,但是这还是裸机程序,没有用到LINUX.本文将记录从FPGA  EDK生成GPIO一直到导入S ...

  10. 大神是如何玩C语言的！

    我在酷壳上看到一篇文章,C语言结构体里的成员数组和指针,看得感觉让我真是佩服地五体投地啊.皓哥虽说谦称自己不是高手啥的,但是写出这样的文章来,真是让我感觉自己的水平真是渣渣!我看完了感觉有点小激动,也 ...