45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:JS如何制作打字效果的动态菜单?

JS如何制作打字效果的动态菜单?

2015-09-10 09:45:47 来源:www.45fan.com 【

JS如何制作打字效果的动态菜单?

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


本文地址:http://www.45fan.com/bcdm/20583.html
Tags: 动态 效果 打字
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部