 |
|
|
 首页 |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
下面的程序还是简朴的测试版。需要编程的整个思路和详细分析步骤的请Email到i-key@263.net。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title> 淡入淡出菜单演示 </title> <style> .sml_menu {font-size: 9pt; color: white; cursor: hand; font-family: Tahoma;} .font3 {font-size: 10.5pt; color: 147e19; font-family: Courier New;} .menuitem {font-size: 10.5pt; color: white; cursor: default; font-family: Courier New;} </style> <script language="javascript"> //LiveMenu Ver1.0 by Key@CyberStudion.NPU //2000.11 var intDelay=50; //设置菜单显示速度，越大越慢，不超过100为好 var intInterval=5; //每次更改的透明度，最好小于10 //以下代码需要改的地方可以更改 function MenuClick() { if (LayerMenu.style.display=="") { LayerMenu.style.display="none"; //当菜单显示的时候单击就关闭菜单 } else{ LayerMenu.filters.alpha.opacity=0; LayerMenu.style.display=""; GradientShow(); //淡入 } } function GradientShow() //实现淡入的函数 { LayerMenu.filters.alpha.opacity+=intInterval; if (LayerMenu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay); } function GradientClose() //实现淡出的函数 { LayerMenu.filters.alpha.opacity-=intInterval; if (LayerMenu.filters.alpha.opacity>0) { setTimeout("GradientClose()",intDelay); } else { LayerMenu.style.display="none"; //当看不到菜单层后还需要把这个层隐藏起来 } } function ChangeBG() //改变菜单项的背景颜色，这里的两种颜色值可以改为你需要的 { oEl=event.srcElement; if (oEl.style.background!="navy") { oEl.style.background="navy"; } else { oEl.style.background="#147e19"; } } function ItemClick() //在菜单项上单击后打开相应链接 { oEl=event.srcElement; oLink=oEl.all.tags( "A" ); if( oLink.length ) { oLink[0].click(); GradientClose(); } } </script> </head> <body onMouseover="GradientClose();"> <br> <p align=center class=font3>LiveMenu V1.0 by Key@CyberStudio.NPU<br>请查看源代码<br> 请手动设置菜单层或菜单提示层的详细位置<br> 在： style="Position:Absolute;Left:???px;Top:???px;" 处设置</p> <!--菜单提示层开始--> <div style="Position:Absolute;Left:250px;Top:120px;" onClick="MenuClick()"> <table border=0 cellpadding=0 cellspacing=0 width=300><tr><td bgcolor=#147e19 class=sml_menu height=20 onselectstart="return false;"> Click here to show the menu ... （单击显示菜单）</td></tr></table> </div> <!--菜单提示层结束--> </body> <!--菜单层开始--> <div id=LayerMenu style="Position:Absolute;Left:250px;Top:137px;Display:none;filter:alpha(opacity=0);" oncontextmenu="return false" onMouseover="window.event.cancelBubble = true;"> <!--上面一行的onMouseover事件是很要害的--> <table border=0 cellpadding=0 cellspacing=0 bgcolor=147e19> <tr><td height=1 bgcolor=#f0f0f0 colspan=2></td></tr> <tr><td width=20 valign=bottom bgcolor=navy></td> <td> <table border=0 width=200 cellpadding=0 cellspacing=0 onselectstart="return false;" onclick="ItemClick();" onMouseover="ChangeBG();" onMouseout="ChangeBG();"> <tr><td class=menuitem height=20 style="background: 147e19;"><a href=/First></a>1.The First Menu Item</td></tr> <tr><td class=menuitem height=20 style="background: 147e19;"><a href=/Second></a>2.The Second Menu Item</td></tr> <tr><td class=menuitem height=20 style="background: 147e19;">3.The Third Menu Item</td></tr> <tr><td class=menuitem height=20 style="background: 147e19;">4.The Fourth Menu Item</td></tr> </table> </td></tr> </table> </div> <!--菜单层结束--> </html> 返回类别: 教程 上一教程: 如何准确处理数据库中的NULL 下一教程: 一个免费的邮件列表源程序(二) 您可以阅读与"WEB页面实现淡入淡出菜单"相关的教程: · 用ASP实现WEB页面分用户权限的访问 · 使用ASP结合数据库实现不限级数的弹出菜单 · WEB关联菜单实现方式 · 关于如何动态地在同一页面实现两个SELECT互传 · 用纯ASP实现完美的WEB柱状图 |
  |
| 快精灵印艺坊 版权所有 |
首页 会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店
|
||
