说明: 一个逐渐显示的下拉菜单
效果: 运行后查看!
代码: 要完成此效果需要两个步骤
第一步:把如下代码加入到<head>区域中
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
第二步:把如下代码加入到<body>区域中 <ilayer id="dropmenu01" height=35px> <layer id="dropmenu02" visibility=show> <span id="iewrap"> <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false"> <font face="宋体"><a href="#">本 站 栏 目</a></font> </span> </span> </layer> </ilayer> <script language="JavaScript1.2">
var enableeffect=true
var selection=new Array() selection[0]='<font face="宋体"><a href="LINK1.htm">LINK1</a></font><br>' selection[1]='<font face="宋体"><a href="LINK2.htm">LINK2</a></font><br>' selection[2]='<font face="宋体"><a href="LINK3.htm">LINK3</a></font><br>' selection[3]='<font face="宋体"><a href="LINK4.htm">LINK4</a></font><br>' selection[4]='<font face="宋体"><a href="LINK5.htm">LINK5</a></font>' if (document.layers) document.dropmenu01.document.dropmenu02.visibility='show' function dropit2(){ if (document.all){ dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (dropmenu03.style.visibility=="hidden"){ if (enableeffect) dropmenu03.filters.revealTrans.apply() dropmenu03.style.visibility="visible" if (enableeffect) dropmenu03.filters.revealTrans.play() } else{ hidemenu() } } } function dropit(e){ if (document.dropmenu03.visibility=="hide") document.dropmenu03.visibility="show" else document.dropmenu03.visibility="hide" document.dropmenu03.left=e.pageX-e.layerX document.dropmenu03.top=e.pageY-e.layerY+19 return false } function hidemenu(){ if (enableeffect) dropmenu03.filters.revealTrans.stop() dropmenu03.style.visibility="hidden" } function hidemenu2(){ document.dropmenu03.visibility="hide" } if (document.layers){ document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK) document.dropmenu01.document.dropmenu02.onclick=dropit } else if (document.all) document.body.onclick=hidemenu </script> <div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:seashell;background-color:seashell;width:100;visibility:hidden;border:1px solid black;padding:0px"> <script language="JavaScript1.2"> if (document.all) dropmenu03.style.padding='4px' for (I=0;I<selection.length;I++) document.write(selection[I]) </script> </div> <script language="JavaScript1.2"> if (document.layers){ document.dropmenu03.captureEvents(Event.CLICK) document.dropmenu03.onclick=hidemenu2 } </script>
Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved. 闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)
鄂公网安备 42011102001154号
站长:MinTao ICP备案号:鄂ICP备11006601号-18