纯js制作的动感导航菜单，当用鼠标点击主菜单时会弹出二级导航菜单，弹出过程带缓冲特效。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>经典实用js动感导航菜单_武鸣人</title>
<style>
body,div,dl,dt,dd{margin:0;padding:0;}
a:link,a:visited{color:#FFF;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:350px;background:#FFF;border:12px solid #EEE;border-radius:10px;margin:10px auto 0;padding:5px 5px 4px;}
#wrap dl{color:#FFF;overflow:hidden;background:#7CF;}
#wrap dt,#wrap dd{padding-left:15px;border-bottom:1px solid #FFF;}
#wrap dt{cursor:pointer;font-size:14px;background:#9C0;line-height:30px;font:700 14px/30px Tahoma;}
#wrap dt.current{background:#09F;}
#wrap dd{background:#7CF;line-height:25px;font:12px/25px Tahoma;}
#copyright{color:#999;width:374px;text-align:right;font:12px/1.5 Tahoma;margin:5px auto 0;}
</style>
<script type="text/javascript">
function create_www_wuming_ren() {
this.oWrap = document.createElement("div");
this.copyright = document.createElement("div");
this.initialize.apply(this, arguments);
this.click.call(this)
}
create_www_wuming_ren.prototype = {
initialize: function(aData) {
var oDl, oElem, project, i;
while(aData[0]) {
oDl = document.createElement("dl");
project = aData[0].project;
for(i = 0; i < project.length; i++) {
if(project[i].href) {
oElem = document.createElement("dd");
oElem.innerHTML = i + ") <a href=\"" + project[i].href + "\" target=\"_blank\">" + project[i].text + "</a>"
}
else {
oElem = document.createElement("dt");
oElem.innerHTML = project[i].text + " (" + (project.length - 1) + ")"
}
oDl.appendChild(oElem);
oDl.style.height = "31px"
}
this.oWrap.appendChild(oDl);
aData.shift()
}
this.oWrap.id = "wrap";
this.copyright.id = "copyright";
this.copyright.innerHTML = "努力是一种状态，与年龄无关，越努力越幸运，越自律越优秀！";
document.body.appendChild(this.oWrap);
document.body.appendChild(this.copyright)
},
click: function() {
var that = this;
this.oWrap.onclick = function(event) {
var oEv, oTarget, oParent, i;
oEv = event || window.event;
oTarget = oEv.target || oEv.srcElement;
oParent = oTarget.parentElement || oTarget.parentNode;
oParent.height = function() {
var iHeight = 0;
for(i = 0;i < oParent.children.length; i++) iHeight += oParent.children[i].offsetHeight;
return iHeight
}();
if(oTarget.tagName.toUpperCase() == "DT") {
var aSiblings = that.siblings(oParent), count, i;
for(count = i = 0; i < aSiblings.length; i++) {
that.startMove(aSiblings[i], oTarget.offsetHeight, "buffer", function() {
this.children[0].className = "";
if(++count == aSiblings.length) {
if(oParent.offsetHeight == oTarget.offsetHeight) {
oTarget.className = "current";
that.startMove(oParent, oParent.height, "flex")
}
else {
that.startMove(oParent, oTarget.offsetHeight, "buffer", function() {
oTarget.className = ""
})
}
}
})
}
}
}
},
startMove: function(obj, iTarget, type, callback) {
var that = this;
clearInterval(obj.timer);
obj.iSpeed = 0;
obj.timer = setInterval(function() {
that[type].call(that, obj, iTarget, callback)
}, 30)
},
buffer: function(obj, iTarget, callback) {
obj.iSpeed = (iTarget - obj.offsetHeight) / 5;
obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
obj.offsetHeight == iTarget ? (clearInterval(obj.timer), callback && callback.call(obj)) : obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
},
flex: function(obj, iTarget, callback) {
obj.iSpeed += (iTarget - obj.offsetHeight) / 6;
obj.iSpeed *= 0.75;
if(Math.abs(iTarget - obj.offsetHeight) <= 1 && Math.abs(obj.iSpeed) <= 1) {
clearInterval(obj.timer);
obj.style.height = iTarget + "px";
callback && callback.call(obj)
}
else {
obj.style.height = obj.offsetHeight + obj.iSpeed + "px"
}
},
siblings: function(element) {
var aTmp = [], oParent = element.parentElement || element.parentNode, i;
for(i = 0; i < oParent.children.length; i++) element != oParent.children[i] && aTmp.push(oParent.children[i]);
return aTmp
}
};
</script>
<script>
window.onload = function() {
new create_www_wuming_ren([
{
project: [{
text: "武鸣人教程：第一课"
},
{
text: "控制Div属性",
href: "https://www.wuming.ren"
},
{
text: "网页换肤",
href: "https://www.wuming.ren"
},
{
text: "函数接收参数并弹出",
href: "https://www.wuming.ren"
},
{
text: "用循环将三个Div变成红色",
href: "https://www.wuming.ren"
},
{
text: "鼠标移入/移出改变样式",
href: "https://www.wuming.ren"
},
{
text: "记住密码提示框",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第二课"
},
{
text: "百度输入法",
href: "https://www.wuming.ren"
},
{
text: "点击Div，显示其innerHTML",
href: "https://www.wuming.ren"
},
{
text: "求出数组中所有数字的和",
href: "https://www.wuming.ren"
},
{
text: "弹出层效果",
href: "https://www.wuming.ren"
},
{
text: "函数传参，改变Div任意属性的值",
href: "https://www.wuming.ren"
},
{
text: "图片列表：鼠标移入/移出改变图片透明度",
href: "https://www.wuming.ren"
},
{
text: "简易选项卡",
href: "https://www.wuming.ren"
},
{
text: "简易JS年历",
href: "https://www.wuming.ren"
},
{
text: "单一按钮显示/隐藏一播放列表收缩展开",
href: "https://www.wuming.ren"
},
{
text: "提示框效果",
href: "https://www.wuming.ren"
},
{
text: "鼠标移过，修改图片路径",
href: "https://www.wuming.ren"
},
{
text: "复选框（checkbox）全选/全不选/返选",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第三课"
},
{
text: "用typeof查看数据类型",
href: "https://www.wuming.ren"
},
{
text: "用parseInt解析数字，并求和",
href: "https://www.wuming.ren"
},
{
text: "累加按钮，自加1",
href: "https://www.wuming.ren"
},
{
text: "输入两个数字，比较大小",
href: "https://www.wuming.ren"
},
{
text: "页面加载后累加，自加1",
href: "https://www.wuming.ren"
},
{
text: "判断数字是否为两位数",
href: "https://www.wuming.ren"
},
{
text: "网页计算器",
href: "https://www.wuming.ren"
},
{
text: "简易网页时钟",
href: "https://www.wuming.ren"
},
{
text: "倒计时时钟（100秒）",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第四课"
},
{
text: "setTimeout应用",
href: "https://www.wuming.ren"
},
{
text: "自动播放一幻灯片效果",
href: "https://www.wuming.ren"
},
{
text: "自动改变方向一幻灯片效果",
href: "https://www.wuming.ren"
},
{
text: "agruments应用一求出函数参数的总合",
href: "https://www.wuming.ren"
},
{
text: "css函数一设置/读取对象的属性",
href: "https://www.wuming.ren"
},
{
text: "当前输入框高亮显示",
href: "https://www.wuming.ren"
},
{
text: "数组练习：各种数组方法的使用",
href: "https://www.wuming.ren"
},
{
text: "事件练习：封装兼容性添加、删除事件的函数",
href: "https://www.wuming.ren"
},
{
text: "星级评分系统",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第五课"
},
{
text: "模拟select控件",
href: "https://www.wuming.ren"
},
{
text: "点击页面，显示单击的坐标",
href: "https://www.wuming.ren"
},
{
text: "用户按下键盘，显示keyCode",
href: "https://www.wuming.ren"
},
{
text: "阻止右键菜单（阻止默认事件）",
href: "https://www.wuming.ren"
},
{
text: "跟随鼠标移动（大图展示）",
href: "https://www.wuming.ren"
},
{
text: "自定义右键菜单",
href: "https://www.wuming.ren"
},
{
text: "用键盘控制Div",
href: "https://www.wuming.ren"
},
{
text: "Div闪烁",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第六课"
},
{
text: "完美拖拽",
href: "https://www.wuming.ren"
},
{
text: "仿腾讯微博效果",
href: "https://www.wuming.ren"
},
{
text: "自定义多级右键菜单",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第七课"
},
{
text: "自动轮播广告（缓冲效果）",
href: "https://www.wuming.ren"
},
{
text: "图片切换（Loading效果）",
href: "lesson7/02.html"
},
{
text: "移动效果（按轨迹移动）",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第八课"
},
{
text: "自定义滚动条",
href: "https://www.wuming.ren"
},
{
text: "拖拽一Clone",
href: "https://www.wuming.ren"
},
{
text: "拖拽并可以改变大小",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第九课"
},
{
text: "仿苹果电脑任务栏菜单",
href: "https://www.wuming.ren"
},
{
text: "拼图小游戏",
href: "https://www.wuming.ren"
},
{
text: "模拟表单控件",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人教程：第十课"
},
{
text: "为数组添加方法（求和，最大值）",
href: "https://www.wuming.ren"
},
{
text: "自动轮播广告（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "运动框架（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "照片墙一多实例演示（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "拖拽库（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "无缝滚动（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "延时加载（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "仿腾讯游戏《英雄杀》官网Flash效果",
href: "https://www.wuming.ren"
},
{
text: "百度有啊通栏展示效果",
href: "https://www.wuming.ren"
},
{
text: "放烟花效果（面向对象版）",
href: "https://www.wuming.ren"
},
{
text: "《穿越火线》官网导航菜单",
href: "https://www.wuming.ren"
},
{
text: "《百度风云榜》TAB切换",
href: "https://www.wuming.ren"
},
{
text: "IBM官网导航条效果",
href: "https://www.wuming.ren"
},
{
text: "面试题-动态生成表格",
href: "https://www.wuming.ren"
}]
},
{
project: [{
text: "武鸣人项目实例"
},
{
text: "眼镜在线试戴",
href: "https://www.wuming.ren"
},
{
text: "日历组件",
href: "https://www.wuming.ren"
},
{
text: "日历组件-淘宝旅行实例",
href: "https://www.wuming.ren"
},
{
text: "淘宝网-迷你登录",
href: "https://www.wuming.ren"
},
{
text: "仿Google+ 游戏频道焦点图效果",
href: "https://www.wuming.ren"
}]
}
]);
(function() {
var oDiv = document.createElement("div");
oDiv.style.width = "384px";
oDiv.style.textAlign = "right";
oDiv.style.margin = "5px auto 10px";
document.body.appendChild(oDiv)
})()
};
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
</body>
</html>