首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 仿QQ校友的DIV模拟窗口效果源码
Mar 24 Javascript
JavaScript 继承机制的实现(待续)
May 18 Javascript
修改好的jquery滚动字幕效果实现代码
Jun 22 Javascript
基于jquery实现状态限定编辑的代码
Feb 11 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
JavaScript基础之this详解
Jun 04 Javascript
JavaScript中使用Async实现异步控制
Aug 15 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
基于JS实现一个随机生成验证码功能
May 29 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
并发(8) el-table(1) 字典(3) Next.js(1) 脚手架(2) set(1) SingleFlight(2) Mybatis-Plus(3) frozenset(1) pip(1)
You might like
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
PHP PDO操作MySQL基础教程
2017/06/05 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
laravel model模型定义实现开启自动管理时间created_at,updated_at
2019/10/17 PHP
CSDN轮换广告图片轮换效果
2007/03/27 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
2015/11/17 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
ES6概念 Symbol.keyFor()方法
2016/12/25 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
vue解决弹出蒙层滑动穿透问题的方法
2018/09/22 Javascript
jQuery实现上下滚动公告栏详细代码
2018/11/21 jQuery
js实现随机数小游戏
2019/06/28 Javascript
一看就会的vuex实现登录验证（附案例）
2020/01/09 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
python分割文件的常用方法
2014/11/01 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
解决python ogr shp字段写入中文乱码的问题
2018/12/31 Python
Pycharm+Scrapy安装并且初始化项目的方法
2019/01/15 Python
Form表单及django的form表单的补充
2019/07/25 Python
python支持多继承吗
2020/06/19 Python
美国成衣女装品牌：CHICO’S
2016/09/19 全球购物
英国最受欢迎的平价女士时装零售商：Roman Originals
2019/11/02 全球购物
c语言常见笔试题总结
2016/09/05 面试题
管理失职检讨书
2014/02/12 职场文书
物业经理自我鉴定
2014/03/03 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
领导班子个人对照检查材料（群众路线）
2014/09/26 职场文书
2015年大学迎新晚会总结
2015/07/16 职场文书
python实现层次聚类的方法
2021/11/01 Python