资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
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,glzy8.com,sky,www.glzy8.com,站长特效 网" /> <meta name="description" content="www.glzy8.com,glzy8.com，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在glzy8.com" /> <title>点击后慢慢弹出下拉菜单，sky整理收集。</title> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3Dtext%2Fjavascript%3E%20%0D%0Afunction%20%24(d)%7B%20%0D%0Areturn%20document.getElementById(d)%3B%20%0D%0A%7D%20%0D%0A%2F%2F%20set%20or%20get%20the%20current%20display%20style%20of%20the%20div%20%0D%0Afunction%20dsp(d%2Cv)%7B%20%0D%0Aif(v%3D%3Dundefined)%7B%20%0D%0Areturn%20d.style.display%3B%20%0D%0A%7Delse%7B%20%0D%0Ad.style.display%3Dv%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20set%20or%20get%20the%20height%20of%20a%20div.%20%0D%0Afunction%20sh(d%2Cv)%7B%20%0D%0A%2F%2F%20if%20you%20are%20getting%20the%20height%20then%20display%20must%20be%20block%20to%20return%20the%20absolute%20height%20%0D%0Aif(v%3D%3Dundefined)%7B%20%0D%0Aif(dsp(d)!%3D'none'%26%26%20dsp(d)!%3D'')%7B%20%0D%0Areturn%20d.offsetHeight%3B%20%0D%0A%7D%20%0D%0Aviz%20%3D%20d.style.visibility%3B%20%0D%0Ad.style.visibility%20%3D%20'hidden'%3B%20%0D%0Ao%20%3D%20dsp(d)%3B%20%0D%0Adsp(d%2C'block')%3B%20%0D%0Ar%20%3D%20parseInt(d.offsetHeight)%3B%20%0D%0Adsp(d%2Co)%3B%20%0D%0Ad.style.visibility%20%3D%20viz%3B%20%0D%0Areturn%20r%3B%20%0D%0A%7Delse%7B%20%0D%0Ad.style.height%3Dv%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F*%20%0D%0A*%20Variable%20'S'%20defines%20the%20speed%20of%20the%20accordian%20%0D%0A*%20Variable%20'T'%20defines%20the%20refresh%20rate%20of%20the%20accordian%20%0D%0A*%2F%20%0D%0As%3D7%3B%20%0D%0At%3D10%3B%20%0D%0A%2F%2FCollapse%20Timer%20is%20triggered%20as%20a%20setInterval%20to%20reduce%20the%20height%20of%20the%20div%20exponentially.%20%0D%0Afunction%20ct(d)%7B%20%0D%0Ad%20%3D%20%24(d)%3B%20%0D%0Aif(sh(d)%3E0)%7B%20%0D%0Av%20%3D%20Math.round(sh(d)%2Fd.s)%3B%20%0D%0Av%20%3D%20(v%3C1)%20%3F%201%20%3Av%20%3B%20%0D%0Av%20%3D%20(sh(d)-v)%3B%20%0D%0Ash(d%2Cv%2B'px')%3B%20%0D%0Ad.style.opacity%20%3D%20(v%2Fd.maxh)%3B%20%0D%0Ad.style.filter%3D%20'alpha(opacity%3D'%2B(v*100%2Fd.maxh)%2B')%3B'%3B%20%0D%0A%7Delse%7B%20%0D%0Ash(d%2C0)%3B%20%0D%0Adsp(d%2C'none')%3B%20%0D%0AclearInterval(d.t)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2FExpand%20Timer%20is%20triggered%20as%20a%20setInterval%20to%20increase%20the%20height%20of%20the%20div%20exponentially.%20%0D%0Afunction%20et(d)%7B%20%0D%0Ad%20%3D%20%24(d)%3B%20%0D%0Aif(sh(d)%3Cd.maxh)%7B%20%0D%0Av%20%3D%20Math.round((d.maxh-sh(d))%2Fd.s)%3B%20%0D%0Av%20%3D%20(v%3C1)%20%3F%201%20%3Av%20%3B%20%0D%0Av%20%3D%20(sh(d)%2Bv)%3B%20%0D%0Ash(d%2Cv%2B'px')%3B%20%0D%0Ad.style.opacity%20%3D%20(v%2Fd.maxh)%3B%20%0D%0Ad.style.filter%3D%20'alpha(opacity%3D'%2B(v*100%2Fd.maxh)%2B')%3B'%3B%20%0D%0A%7Delse%7B%20%0D%0Ash(d%2Cd.maxh)%3B%20%0D%0AclearInterval(d.t)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20Collapse%20Initializer%20%0D%0Afunction%20cl(d)%7B%20%0D%0Aif(dsp(d)%3D%3D'block')%7B%20%0D%0AclearInterval(d.t)%3B%20%0D%0Ad.t%3DsetInterval('ct(%22'%2Bd.id%2B'%22)'%2Ct)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2FExpand%20Initializer%20%0D%0Afunction%20ex(d)%7B%20%0D%0Aif(dsp(d)%3D%3D'none')%7B%20%0D%0Adsp(d%2C'block')%3B%20%0D%0Ad.style.height%3D'0px'%3B%20%0D%0AclearInterval(d.t)%3B%20%0D%0Ad.t%3DsetInterval('et(%22'%2Bd.id%2B'%22)'%2Ct)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2F%20Removes%20Classname%20from%20the%20given%20div.%20%0D%0Afunction%20cc(n%2Cv)%7B%20%0D%0As%3Dn.className.split(%2F%5Cs%2B%2F)%3B%20%0D%0Afor(p%3D0%3Bp%3Cs.length%3Bp%2B%2B)%7B%20%0D%0Aif(s%5Bp%5D%3D%3Dv%2Bn.tc)%7B%20%0D%0As.splice(p%2C1)%3B%20%0D%0An.className%3Ds.join('%20')%3B%20%0D%0Abreak%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%2F%2FAccordian%20Initializer%20%0D%0Afunction%20Accordian(d%2Cs%2Ctc)%7B%20%0D%0A%2F%2F%20get%20all%20the%20elements%20that%20have%20id%20as%20content%20%0D%0Al%3D%24(d).getElementsByTagName('div')%3B%20%0D%0Ac%3D%5B%5D%3B%20%0D%0Afor(i%3D0%3Bi%3Cl.length%3Bi%2B%2B)%7B%20%0D%0Ah%3Dl%5Bi%5D.id%3B%20%0D%0Aif(h.substr(h.indexOf('-')%2B1%2Ch.length)%3D%3D'content')%7Bc.push(h)%3B%7D%20%0D%0A%7D%20%0D%0Asel%3Dnull%3B%20%0D%0A%2F%2Fthen%20search%20through%20headers%20%0D%0Afor(i%3D0%3Bi%3Cl.length%3Bi%2B%2B)%7B%20%0D%0Ah%3Dl%5Bi%5D.id%3B%20%0D%0Aif(h.substr(h.indexOf('-')%2B1%2Ch.length)%3D%3D'header')%7B%20%0D%0Ad%3D%24(h.substr(0%2Ch.indexOf('-'))%2B'-content')%3B%20%0D%0Ad.style.display%3D'none'%3B%20%0D%0Ad.style.overflow%3D'hidden'%3B%20%0D%0Ad.maxh%20%3Dsh(d)%3B%20%0D%0Ad.s%3D(s%3D%3Dundefined)%3F%207%20%3A%20s%3B%20%0D%0Ah%3D%24(h)%3B%20%0D%0Ah.tc%3Dtc%3B%20%0D%0Ah.c%3Dc%3B%20%0D%0A%2F%2F%20set%20the%20onclick%20function%20for%20each%20header.%20%0D%0Ah.onclick%20%3D%20function()%7B%20%0D%0Afor(i%3D0%3Bi%3Cthis.c.length%3Bi%2B%2B)%7B%20%0D%0Acn%3Dthis.c%5Bi%5D%3B%20%0D%0An%3Dcn.substr(0%2Ccn.indexOf('-'))%3B%20%0D%0Aif((n%2B'-header')%3D%3Dthis.id)%7B%20%0D%0Aex(%24(n%2B'-content'))%3B%20%0D%0An%3D%24(n%2B'-header')%3B%20%0D%0Acc(n%2C'__')%3B%20%0D%0An.className%3Dn.className%2B'%20'%2Bn.tc%3B%20%0D%0A%7Delse%7B%20%0D%0Acl(%24(n%2B'-content'))%3B%20%0D%0Acc(%24(n%2B'-header')%2C'')%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif(h.className.match(%2Fselected%2B%2F)!%3Dundefined)%7B%20sel%3Dh%3B%7D%20%0D%0A%7D%20%0D%0A%7D%20%0D%0Aif(sel!%3Dundefined)%7Bsel.onClick()%3B%7D%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> <style type="text/css"> <!-- body{ font-size: 12px; color: #999999; background-color: #000000; font-family: Arial, Helvetica, sans-serif; text-transform: capitalize; } * { margin: 0px; padding: 0px; border: 0px;list-style:none;} /*菜单样式*/ #basic-accordian{ width:20%; z-index:2; margin-top: 2%; border-top-style: solid; border-top-color: #999999; border-bottom-style: solid; border-bottom-color: #666666; padding-top: 15px; padding-bottom: 15px; margin-bottom: 2%; }/*菜单背景*/ .accordion_headings{ padding:2px; color:#FFFFFF; cursor:pointer; font-weight:bold; font-size: 14px; line-height: 25px; letter-spacing: 1px; }/*菜单分类行*/ .accordion_headings:hover{ } .accordion_child{ padding-left: 20px; padding-bottom: 8px; } .accordion_child ul{} .accordion_child ul li{ font-size: 12px; display: block; line-height: 20px; display:block; } .accordion_child ul li a{ text-decoration: none; color: #666666; } .accordion_child ul li a:hover{ color: #FFFFFF; } .header_highlight{ background-color: #000000; color: #FF0099; }/*当前显示菜单分类样式*/ /*菜单样式结束*/ .main { margin-top: 2%; width: 96%; margin-right: auto; margin-left: auto; } /*特殊样式-------------------------*/ --> </style> </head> <body onload="new Accordian('basic-accordian',5,'header_highlight');"> <a href="<#ZC_BLOG_HOST#>">glzy8.com</a>,站长必备的高质量网页特效和广告代码。glzy8.com，站长js特效。<hr> <!--欢迎来到glzy8.com，我们网站收集大量高质量js特效，提供许多广告代码下载--> <div class="main"> <div id="basic-accordian" ><!--菜单开始--> <div id="test-header" class="accordion_headings" >网站首页</div><!--1新闻资讯--> <div id="test-content"> <div class="accordion_child"> <ul><li><a href="http://glzy8.com" _ewebeditor_ta_href="http%3A%2F%2Fglzy8.com">管理资源吧</a></li> <li><a href="http://www.glzy8.com/jiaoben/" _ewebeditor_ta_href="http%3A%2F%2Fwww.glzy8.com%2Fjiaoben%2F">网页特效</a></li> </ul> </div> </div> <div id="test1-header" class="accordion_headings" >学院概况</div><!--2学院概况--> <div id="test1-content"> <div class="accordion_child"> <ul><li><a href="http://glzy8.com/?Cat=11" _ewebeditor_ta_href="http%3A%2F%2Fglzy8.com%2F%3FCat%3D11">广告代码</a></li> <li><a href="http://glzy8.com/?Cat=2" _ewebeditor_ta_href="http%3A%2F%2Fglzy8.com%2F%3FCat%3D2">网页特效</a></li> <li><a href="#" _ewebeditor_ta_href="%23">教学设施</a></li> <li><a href="#" _ewebeditor_ta_href="%23">刘晓阳校长介绍</a></li> <li><a href="#" _ewebeditor_ta_href="%23">优良师资</a></li> <li><a href="#" _ewebeditor_ta_href="%23">资质认证与荣誉</a></li> </ul> </div></div> <div id="test2-header" class="accordion_headings" >专业设置</div> <!--3课程设置--> <div id="test2-content"> <div class="accordion_child"> <ul> <li><a href="#" _ewebeditor_ta_href="%23">形象设计 (大学专科)</a></li> <li><a href="#" _ewebeditor_ta_href="%23">化妆造型</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美容</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美发</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美甲</a></li> </ul></div></div> <div id="test3-header" class="accordion_headings" >国际文凭课程</div><!--4国际文凭课程--> <div id="test3-content"> <div class="accordion_child"> <ul><li><a href="#" _ewebeditor_ta_href="%23">cidesco圣迪斯哥</a></li> <li><a href="#" _ewebeditor_ta_href="%23">city & gulids国际美容师</a></li> <li><a href="#" _ewebeditor_ta_href="%23">cibtac国际美容师</a></li> <li><a href="#" _ewebeditor_ta_href="%23">srh国际发型师</a></li> <li><a href="#" _ewebeditor_ta_href="%23">itec国际专业时装、舞台、媒体化妆师</a></li> </ul></div></div> <div id="test4-header" class="accordion_headings" >师生经典作品</div> <!--5作品赏析--> <div id="test4-content"> <div class="accordion_child"> <ul> <li><a href="#" _ewebeditor_ta_href="%23">形象设计</a></li> <li><a href="#" _ewebeditor_ta_href="%23">化妆造型</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美容</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美发</a></li> <li><a href="#" _ewebeditor_ta_href="%23">美甲</a></li> </ul> </div></div> <div id="test5-header" class="accordion_headings" >在线视频</div><!--6学校视频--> <div id="test5-content"> <div class="accordion_child"> <ul> <li><a href="#" _ewebeditor_ta_href="%23">学院介绍视频</a></li> <li><a href="#" _ewebeditor_ta_href="%23">活动视频</a></li> <li><a href="#" _ewebeditor_ta_href="%23">考试现场视频</a></li> </ul> </div></div> <div id="test6-header" class="accordion_headings" >蒙妮坦精英学员</div><!--7招生信息--> <div id="test6-content"> <div class="accordion_child"> <ul> <li><a href="http://glzy8.com/" _ewebeditor_ta_href="http%3A%2F%2Fglzy8.com%2F">留言本</a></li> <li><a href="#" _ewebeditor_ta_href="%23">形象设计大学专科毕业生</a></li> <li><a href="#" _ewebeditor_ta_href="%23">cidesco美容博士人才</a></li> <li><a href="#" _ewebeditor_ta_href="%23">作育英才时代见证(1981-2000年)</a></li> </ul> </div></div> <div id="test7-header" class="accordion_headings" >招生信息</div><!--8招生信息--> <div id="test7-content"> <div class="accordion_child"> <ul> <li><a href="#" _ewebeditor_ta_href="%23">2008年招生简章</a></li> <li><a href="#" _ewebeditor_ta_href="%23">报名方式</a></li> <li><a href="#" _ewebeditor_ta_href="%23">报名须知</a></li> <li><a href="#" _ewebeditor_ta_href="%23">在线报名</a></li> </ul> </div></div> <div id="test8-header" class="accordion_headings" >咨询留言</div><!--8在线咨询--> <div id="test8-content"> <div class="accordion_child"> <ul> <li><a href="http://glzy8.com/" _ewebeditor_ta_href="http%3A%2F%2Fglzy8.com%2F">留言本</a></li> <li><a href="#" _ewebeditor_ta_href="%23">常见问题</a></li> <li><a href="#" _ewebeditor_ta_href="%23">在线留言</a></li> <li><a href="#" _ewebeditor_ta_href="%23">联系我们</a></li> </ul> </div></div> </div><!--菜单结束--> </div><!--main结束--> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程