当前位置: 首页 > 图文教程 > 网络编程 > ASP > WEB页面实现淡入淡出菜单

ASP
提高SQL的执行效率的ASP的五种做法
asp的offset的一个go to page
asp中command的在单条记录时,有些字段显示为空的问题
asp,php一句话木马整理方便查找木马
asp 合并记录集并删除的sql语句
asp下循环一行多少个
asp循环行数输出函数
asp access重新开始编号
ASP生成数字相加求和的BMP图片验证码
静态页面利用JS读取cookies记住用户信息
比较详细的Asp伪静态化方法及Asp静态化探讨
asp Response.flush 实时显示进度
Asp高级故障解决以及相关代码
asp智能脏话过滤系统v1.0
ASP文件中的安全问题
Access数据库中“所有记录中均未找到搜索关键字”的解决方法
asp两组字符串数据比较合并相同数据
asp MYSQL出现问号乱码的解决方法
asp文章中随机插入网站版权文字的实现代码
ASP利用XMLHTTP实现表单提交以及cookies的发送的代码

ASP 中的 WEB页面实现淡入淡出菜单


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-11-03   浏览: 219 ::
收藏到网摘: n/a

  (本文适合菜级网页制作者或初级WEB编程者阅读参考)
下面的程序还是简单的测试版。需要编程的整个思路和具体分析步骤的请Email到[email protected]

<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 [email protected]
//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 [email protected]<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;">&nbsp;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>
&n