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

王朝学院·作者佚名 2016-08-27

宽屏版字体: 小 | 中 | 大 | 超大

这篇文章主要介绍了JS打字效果的动态菜单，推荐给大家，有需要的小伙伴可以参考下。

这是一款基于javascript实现的打字效果的动态菜单特效代码，分享给大家学习学习。

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的JS打字效果的动态菜单代码如下

<html>

<head>

<title>JS打字效果的动态菜单</title>

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>

// ===========================================================

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 != " ")

{

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 = " ";

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 = " ";

}

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,

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>

**** TELETYPE MENU V1 ****

16K RAM SYSTEM 7892 BASIC BYTES FREE

READY.

Hello. Please select an option:

You have 3 messages waiting.

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.

YOU'VE HEARD ABOUT IT YOU'VE READ ABOUT IT YOU'VE SEEN IT ON TV AND NOW IT'S FINALLY HERE! THE MOST EFFECTIVE WEIGHT-LOSS INGREDIENT EVER TO HIT THE MARKET IS NOW AVAILABLE FROM NITHRUTHON!!!!

Get the Finest Rulex Watch Replica! - Replicated to the Smallest Detail - 98% Perfectly Accurate Markings - perfect as a gift for your colleagues and friends - free gift box Make your order before the prices go up!!!!!

There are no items to show in this view.

Yes I know, I should upgrade... <img src="80552_brd.gif">

404 error... <img src="Foucault.gif">

Color schemes

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"}'?

[an error occurred while processing this directive]

Cogito cogito ergo cogito sum. I think that I think, therefore I think that I am.

Computer's rule:

My computer is always right, the human is always the problem ..

See Rule #1

-- Best viewed on my computer.

</div>

</body>

</html>