这是一款基于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="/UploadFiles/2021-04-02/(.*)">
以上就是为大家分享的JS打字效果的动态菜单代码，希望大家可以喜欢。
标签：
JS,打字效果,动态菜单
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“JS打字效果的动态菜单代码分享”评论...