非常酷的js图形渐隐导航菜单栏- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 非常酷的js图形渐隐导航菜单栏

Javascript: 手把手教你做超酷的条形码效果; pjblog中的UBBCode.js; 一个跟随鼠标的图片放大效果，与FF兼容; 学习jquery之一; javascript英文日期（有时间）选择器; 几行代码轻松搞定jquery实现flash8类似的连接效果; 搜集了几个不错的下拉菜单效果; 无间断滚动的新闻文章列表，兼容IE、Firefox和Opera，符合W3C标准。可作Marquee; 一个js实现的所谓的滑动门; OfflineSave离线保存代码再次发布使用说明; css静态滤镜 + A:Hover 效果; js+ajax实现的A*游戏路径算法整理; JSON 学习之完全手册图文; Javascript & DHTML 实例编程（教程）（四）初级实例篇2—动画; jQuery基础学习技巧总结; jQuery 中关于CSS操作部分使用说明; 经常用的图片在容器中的水平垂直居中实例; 比较不错的一款图片广告效果; 用javascript实现的汉字简繁转换; javascript实现的文字加密解密

No. « ‹ 204 205 206 207 › »

技术文章搜索

关键字

Javascript 中的非常酷的js图形渐隐导航菜单栏

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 163 ::

收藏到网摘: n/a

JavaScript延时效果比较不错的科讯商业版中用到的ajax空间与分页函数

点击运行可以看到效果:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="">
<style type=text/css>
body { background:#799AE1; margin:0px; font:normal 12px 宋体; }
table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; }
a:hover { color:#428EFF }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#D6DFF7; }
.menu_title { }
.menu_title span { position:relative; top:2px; left:8px; color:#215DC6; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:2px; left:8px; color:#428EFF; font-weight:bold; }
</style>
<script language=javascript>
function menuShow(obj,maxh,obj2)
{ if(obj.style.pixelHeight<maxh) { obj.style.pixelHeight+=maxh/20; obj.filters.alpha.opacity+=5; obj2.background="images/title_bg_hide.gif"; if(obj.style.pixelHeight==maxh/10) obj.style.display='block'; myObj=obj; myMaxh=maxh; myObj2=obj2; setTimeout('menuShow(myObj,myMaxh,myObj2)','5'); }
}
function menuHide(obj,maxh,obj2)
{ if(obj.style.pixelHeight>0) { if(obj.style.pixelHeight==maxh/20) obj.style.display='none'; obj.style.pixelHeight-=maxh/20; obj.filters.alpha.opacity-=5; obj2.background="images//title_bg_show.gif"; myObj=obj; myMaxh=maxh myObj2=obj2; setTimeout('menuHide(myObj,myMaxh,myObj2)','5'); } else if(whichContinue) whichContinue.click();
}
function menuChange(obj,maxh,obj2)
{ if(obj.style.pixelHeight) { menuHide(obj,maxh,obj2); whichOpen=''; whichcontinue=''; } else if(whichOpen) { whichContinue=obj2; whichOpen.click(); } else { menuShow(obj,maxh,obj2); whichOpen=obj2; whichContinue=''; }
}
</script>
<base target=main>
</head>
<body onselectstart="return false;" ondragstart="return false;" oncontextmenu="return false;">
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=42 valign=bottom> <img src=images/title.gif width=158 height=38> </td> </tr>
</table>
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_hide.gif id=menuTitle1 onclick="menuChange(menu1,80,menuTitle1);"> <span>系统选项</span> </td> </tr> <tr> <td> <div class=sec_menu style="width:158px;height:80px;filter:alpha(Opacity=100);overflow:hidden;" id=menu1> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_safe.gif> 安全选项</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_recycle.gif> 垃圾邮件选项</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_dynamic.gif> 动态规则选项</a> </td> </tr> </table> </div> </td> </tr>
</table>
<script language=javascript> var whichOpen=menuTitle1; var whichContinue='';
</script>
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle2 onclick="menuChange(menu2,120,menuTitle2);"> <span>系统规则</span> </td> </tr> <tr> <td> <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu2> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_ip.gif> IP过滤规则</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailer.gif> 信封过滤规则</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailheader.gif> 信头过滤规则</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailbody.gif> 信体过滤规则</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_accessory.gif> 附件过滤规则</a> </td> </tr> </table> </div> </td> </tr>
</table>
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle3 onclick="menuChange(menu3,120,menuTitle3);"> <span>系统管理</span> </td> </tr> <tr> <td> <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu3> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_user.gif> 用户管理</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_course.gif> 进程管理</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_host.gif> 主机运行状态</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_data.gif> 数据备份</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_recycle.gif> 垃圾目录管理</a> </td> </tr> </table> </div> </td> </tr>
</table>
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_show.gif id=menuTitle4 onclick="menuChange(menu4,140,menuTitle4);"> <span>系统统计</span> </td> </tr> <tr> <td> <div class=sec_menu style="width:158;height:0;filter:alpha(Opacity=0);display:none;" id=menu4> <table cellpadding=0 cellspacing=0 align=center width=135 style="position:relative;top:10px;"> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_ip.gif> IP过滤统计</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailer.gif> 信封过滤统计</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailheader.gif> 信头过滤统计</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_mailbody.gif> 信体过滤统计</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_accessory.gif> 附件过滤统计</a> </td> </tr> <tr> <td height=20> <a href=http://qybbs.net onfocus=this.blur();><img src=images/icon_dynamic.gif> 动态规则统计</a> </td> </tr> </table> </div> </td> </tr>
</table>
<table cellpadding=0 cellspacing=0 width=158 align=center> <tr style="cursor:hand;"> <td height=25 class=menu_title onmouseover=this.className='menu_title2'; onmouseout=this.className='menu_title'; background=http://images.jojoo.net/js/title_bg_quit.gif> <span>退出系统</span> </td> </tr>
</table>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

JavaScript延时效果比较不错的科讯商业版中用到的ajax空间与分页函数

Javascript 中的 非常酷的js图形渐隐导航菜单栏

评论 (0) All

Javascript 中的非常酷的js图形渐隐导航菜单栏