ホームページ >ウェブフロントエンド >jsチュートリアル >JS タイピングの動的メニュー コード共有、effect_javascript スキル
JS タイピングの動的メニュー コード共有、effect_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:43:431460ブラウズ
这是一款基于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打字效果的动态菜单代码，希望大家可以喜欢。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。