软件开发培训班 >> 编程开发 >> JavaScript

点击后慢慢弹出下拉菜单效果代码(栏目管理常用)

　　本文标签：下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,jb51.net,sky,www.jb51.net,站长特效 网" /> 
<meta name="description" content="www.jb51.net,jb51.net，站长必备js特效及广告代码 。大量高质量js特效，提供高质量广告代码下载,尽在jb51.net" /> 
<title>点击后慢慢弹出下拉菜单，sky整理收集 。</title> 
<script type=text/javascript> 
function $(d){ 
return document.getElementById(d); 
} 
// set or get the current display style of the div 
function dsp(d,v){ 
if(v==undefined){ 
return d.style.display; 
}else{ 
d.style.display=v; 
} 
} 
// set or get the height of a div. 
function sh(d,v){ 
// if you are getting the height then display must be block to return the absolute height 
if(v==undefined){ 
if(dsp(d)!=none&& dsp(d)!=){ 
return d.offsetHeight; 
} 
viz = d.style.visibility; 
d.style.visibility = hidden; 
o = dsp(d); 
dsp(d,block); 
r = parseInt(d.offsetHeight); 
dsp(d,o); 
d.style.visibility = viz; 
return r; 
}else{ 
d.style.height=v; 
} 
} 
/* 
* Variable S defines the speed of the accordian 
* Variable T defines the refresh rate of the accordian 
*/ 
s=7; 
t=10; 
//Collapse Timer is triggered as a setInterval to reduce the height of the div exponentially. 
function ct(d){ 
d = $(d); 
if(sh(d)>0){ 
v = Math.round(sh(d)/d.s); 
v = (v<1) ? 1 :v ; 
v = (sh(d)-v); 
sh(d,v+px); 
d.style.opacity = (v/d.maxh); 
d.style.filter= alpha(opacity=+(v*100/d.maxh)+);; 
}else{ 
sh(d,0); 
dsp(d,none); 
clearInterval(d.t); 
} 
} 
//Expand Timer is triggered as a setInterval to increase the height of the div exponentially. 
function et(d){ 
d = $(d); 
if(sh(d)<d.maxh){ 
v = Math.round((d.maxh-sh(d))/d.s); 
v = (v<1) ? 1 :v ; 
v = (sh(d)+v); 
sh(d,v+px); 
d.style.opacity = (v/d.maxh); 
d.style.filter= alpha(opacity=+(v*100/d.maxh)+);; 
}else{ 
sh(d,d.maxh); 
clearInterval(d.t); 
} 
} 
// Collapse Initializer 
function cl(d){ 
if(dsp(d)==block){ 
clearInterval(d.t); 
d.t=setInterval(ct("+d.id+"),t); 
} 
} 
//Expand Initializer 
function ex(d){ 
if(dsp(d)==none){ 
dsp(d,block); 
d.style.height=0px; 
clearInterval(d.t); 
d.t=setInterval(et("+d.id+"),t); 
} 
} 
// Removes Classname from the given div. 
function cc(n,v){ 
s=n.className.split(/\s+/); 
for(p=0;p<s.length;p++){ 
if(s[p]==v+n.tc){ 
s.splice(p,1); 
n.className=s.join( ); 
break; 
} 
} 
} 
//Accordian Initializer 
function Accordian(d,s,tc){ 
// get all the elements that have id as content 
l=$(d).getElementsByTagName(div); 
c=[]; 
for(i=0;i<l.length;i++){ 
h=l[i].id; 
if(h.substr(h.indexOf(-)+1,h.length)==content){c.push(h);} 
} 
sel=null; 
//then search through headers 
for(i=0;i<l.length;i++){ 
h=l[i].id; 
if(h.substr(h.indexOf(-)+1,h.length)==header){ 
d=$(h.substr(0,h.indexOf(-))+-content); 
d.style.display=none; 
d.style.overflow=hidden; 
d.maxh =sh(d); 
d.s=(s==undefined)? 7 : s; 
h=$(h); 
h.tc=tc; 
h.c=c; 
// set the onclick function for each header. 
h.onclick = function(){ 
for(i=0;i<this.c.length;i++){ 
cn=this.c[i]; 
n=cn.substr(0,cn.indexOf(-)); 
if((n+-header)==this.id){ 
ex($(n+-content)); 
n=$(n+-header); 
cc(n,__); 
n.className=n.className+ +n.tc; 
}else{ 
cl($(n+-content)); 
cc($(n+-header),); 
} 
} 
} 
if(h.className.match(/selected+/)!=undefined){ sel=h;} 
} 
} 
if(sel!=undefined){sel.onClick();} 
} 
</script> 
<style type="text/css"> 
 
</style> 
</head> 
<body onload="new Accordian(basic-accordian,5,header_highlight);"> 
">jb51.net,站长必备的高质量网页特效和广告代码 。jb51.net，站长js特效 。<hr> 
 
<div class="main"> 
<div id="basic-accordian" > 
<div id="test-header" class="accordion_headings" >网站首页</div> 
<div id="test-content"> 
<div class="accordion_child"> 
<ul><li>脚本之家</li> 
<li>网页特效</li> 
</ul> 
</div> 
</div> 
<div id="test1-header" class="accordion_headings" >学院概况</div> 
<div id="test1-content"> 
<div class="accordion_child"> 
<ul><li>广告代码</li> 
<li>网页特效</li> 
<li>教学设施</li> 
<li>刘晓阳校长介绍</li> 
<li>优良师资</li> 
<li>资质认证与荣誉</li> 
</ul> 
</div></div> 
<div id="test2-header" class="accordion_headings" >专业设置</div>  
<div id="test2-content"> 
<div class="accordion_child"> 
<ul> 
<li>形象设计 (大学专科)</li> 
<li>化妆造型</li> 
<li>美容</li> 
<li>美发</li> 
<li>美甲</li> 
</ul></div></div> 
<div id="test3-header" class="accordion_headings" >国际文凭课程</div> 
<div id="test3-content"> 
<div class="accordion_child"> 
<ul><li>cidesco圣迪斯哥</li> 
<li>city & gulids国际美容师</li> 
<li>cibtac国际美容师</li> 
<li>srh国际发型师</li> 
<li>itec国际专业时装、舞台、媒体化妆师</li> 
</ul></div></div> 
<div id="test4-header" class="accordion_headings" >师生经典作品</div> 
 
<div id="test4-content"> 
<div class="accordion_child"> 
<ul> 
<li>形象设计</li> 
<li>化妆造型</li> 
<li>美容</li> 
<li>美发</li> 
<li>美甲</li> 
</ul> 
</div></div> 
<div id="test5-header" class="accordion_headings" >在线视频</div> 
<div id="test5-content"> 
<div class="accordion_child"> 
<ul> 
<li>学院介绍视频</li> 
<li>活动视频</li> 
<li>考试现场视频</li> 
</ul> 
</div></div> 
<div id="test6-header" class="accordion_headings" >蒙妮坦精英学员</div> 
<div id="test6-content"> 
<div class="accordion_child"> 
<ul> 
<li>留言本</li> 
<li>形象设计大学专科毕业生</li> 
<li>cidesco美容博士人才</li> 
<li>作育英才时代见证(1981-2000年)</li> 
</ul> 
</div></div> 
<div id="test7-header" class="accordion_headings" >招生信息</div> 
<div id="test7-content"> 
<div class="accordion_child"> 
<ul> 
<li>2008年招生简章</li> 
<li>报名方式</li> 
<li>报名须知</li> 
<li>在线报名</li> 
</ul> 
</div></div> 
<div id="test8-header" class="accordion_headings" >咨询留言</div> 
<div id="test8-content"> 
<div class="accordion_child"> 
<ul> 
<li>留言本</li> 
<li>常见问题</li> 
<li>在线留言</li> 
<li>联系我们</li> 
</ul> 
</div></div> 
</div> 
</div> 
</body> 
</html>

技术文章快速查找

六款帮助你实现惊艳视差滚动效果的jQuery插件

用js判断页面是否加载完成实现代码

Javascript this关键字使用分析

简单的js表单验证函数

完美解决JS中汉字显示乱码问题（已解决）

JavaScript 点击插入文字

为jQuery.Treeview添加右键菜单的实现代码

JavaScript 常见对象类创建代码与优缺点分析

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建