Heim > Artikel > Web-Frontend > Dynamisches Menü-Code-Sharing für JS-Eingabeeffekt_Javascript-Kenntnisse
Dynamisches Menü-Code-Sharing für JS-Eingabeeffekt_Javascript-Kenntnisse
- WBOYOriginal
- 2016-05-16 15:43:431418Durchsuche
这是一款基于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打字效果的动态菜单代码，希望大家可以喜欢。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js-Implementierung des Select-Jump-Menüs, neuer Fenstereffekt, Code-Sharing (supereinfach), Javascript-KenntnisseNächster Artikel：js-Implementierung des Select-Jump-Menüs, neuer Fenstereffekt, Code-Sharing (supereinfach), Javascript-Kenntnisse
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse