我要投稿
收藏本站
网站地图
RSS订阅
首页
免费主页空间
免费建站资源
免费网络资源
免费试用赠品
可爱素材
卡通动漫
站长学院
网页特效代码
小说文学
搞笑电影
搞笑短信
手机图片下载
手机铃声下载
QQ空间代码
图像处理
鼠标指针下载
耽恋模板下载
DL资源分享
迅雷资源下载
手机主题下载
智能模糊搜索
仅搜索标题
耽恋免费资源站
介绍各种免费资源信息，提供各类免费资源下载.
当前位置 :
|
首页
>
网页特效代码
>
菜单导航特效
>
多级滚动菜单(推荐) - 网页特效代码演示
Wt:耽恋网页特效教程
耽恋免费资源站
Dt:2008-06-14
要完成此效果需要三个步骤 第一步：把如下代码加入到<head>区域中 <style> body,td,a {font-size:9pt;color:black;text-decoration:none} .normal {padding:2px} .up {padding:1px;border:#999999 1px solid;background:#cccccc} .down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb} .menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px} </style> 第二步：把如下代码加入到<body>区域中 <script> //闪烁的表格边框 function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500) //渐入的效果,改变alpha值 function high(image){theobject=image,highlighting=setInterval("highlightit(theobject)",100)}function low(image){clearInterval(highlighting),image.filters.alpha.opacity=50}function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=20;else if(window.highlighting)clearInterval (highlighting)} //拖动层的js var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;}} //滑动层 function bodyload() { if(plane.style.pixelTop!=0) { plane.style.pixelTop-=10 setTimeout('bodyload()',1) } } //渐变显示层 function Show(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "visible"; divid.filters.revealTrans.play(); } function Hide(divid) { divid.filters.revealTrans.apply(); divid.style.visibility = "hidden"; divid.filters.revealTrans.play(); } </script> <div style="position:absolute;z-index:1;width:1;height:1; left: 0; top: 500" ID=plane onmousedown="down=true;divleft=event.clientX-parseInt(plane.style.left);divtop=event.clientY-parseInt(plane.style.top)" onmouseup="down=false"> <table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4"> <tr> <td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move"> <div align="center">多级滑动菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu1) " onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" > <div align="right">有下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this),Show(menu2)" onMouseOut="this.className='normal',low(this),menu2.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" > <div align="right">有下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="right">无下级菜单>></div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="right">无下级菜单>></div> </td> </tr> </table> <div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv"> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="center">子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> </table> </div> <div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width: 105" onMouseOver=this.style.visibility='visible' onMouseOut=this.style.visibility='hidden' class="menuv"> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align="center">子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> <tr> <td class=normal onMouseDown="this.className='down'" onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"> <div align=center>子菜单</div> </td> </tr> </table> </div> </div> 第三步：把“onmousemove="move()" onload=bodyload()”加在<body>标记里 例如：<body onmousemove="move()" onload=bodyload()>
运行代码
[
收藏
]
[
推荐
]
[
评论
]
[
打印
]
[
关闭
]
[]
上一篇：
点击显示下拉菜单 - 网页特效代码演示
下一篇：
可拖动的菜单 - 网页特效代码演示
相关文章：
半透明的下拉菜单特效 - 网页特
可选择左右滚动的菜单,带缓动效
一种标准的网页下拉菜单(符合web
最新google首页的超酷导航效果 -
一个多功能蓝色漂亮的搜索条. -
滑动门技术菜单 - 兼容firefox火
XP菜单网页特效 - 网页特效代码
显示隐藏的导航菜单 - 网页特效
多颜色菜单 - 网页特效代码演示
windows XP左侧的菜单效果 - 网
最新评论
查看所有评论
精彩推荐
栏目列表
推荐浏览
热点关注
半透明的下拉菜单特效 - 网
仿QQ导航菜单特效 - 网页特
层叠式导航菜单 - 网页特效
可选择左右滚动的菜单,带缓
最新google首页的超酷导航效
下拉式导航菜单 - 网页特效
windows XP左侧的菜单效果 -
一种标准的网页下拉菜单(符
滑动门技术菜单 - 兼容firef
一个多功能蓝色漂亮的搜索条
手机图片
可爱小情侣动态手机图片下载
动态来电屏保下载(176x220)
搞笑手机屏保图片下载(240x3
可爱猫猫动态手机图片下载(1
韩国帅哥美男手机壁纸图片下
