返回首页
设为首页
收藏本站
菜单导航
鼠标按钮
文本图像
时间日期
游戏娱乐
状态栏类
广告特效
综合特效
站长工具
热门关键字 :
mssql
在线备份
百度搜索
关闭
滚动说明
链接
智能
标题
当前位置：
特效代码站
>
菜单导航
> 正文
可自由摆放的多极导航菜单
来源：
www.texiao.org.cn
作者：
cheney
时间：
08-02-22
点击：
要完成此效果需要三个步骤 第一步：把如下代码加入到<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()> 特效代码站提供－更多精采代码－尽在特效代码站www.texiao.org.cn
[
标签:
导航菜单
,
特效代码
]
[
打印
]
[
关闭
]
上一篇：
网页在线备份mssql的一段代码
下一篇：
类似xp菜单的经典导航样式
本类最新
免费百度搜索代码
网页在线备份mssql的一段代码
可自由摆放的多极导航菜单
类似xp菜单的经典导航样式
某购物网站的经典导航特效
本类热门
一款非常漂亮的标签切换似菜单导航特...
免费百度搜索代码
可自由摆放的多极导航菜单
经典实用的浮动菜单特效代码
某购物网站的经典导航特效
相关代码
免费百度搜索代码
网页在线备份mssql的一段代码
一个精彩的在线迷宫游戏
你心中的她是什么性格
在线俄罗斯方块游戏
一个简单的数学测试
文字从天而降的特效
逐渐显示的文字
打字机样式的琢字显示的彩色文...
不停向上滚动的文本
经典推荐
免费百度搜索代码
网页在线备份mssql的一段代码
一个精彩的在线迷宫游戏
你心中的她是什么性格
在线俄罗斯方块游戏
文字从天而降的特效
打字机样式的琢字显示的彩色文...
鼠标右键添加收藏夹
防止网页被采集的代码
随网页滚动条上下移动的QQ网页...
热门关注
奥运会开幕倒计时代码
一款非常漂亮的标签切换似菜单...
免费百度搜索代码
常用的网页漂浮广告特效代码
智能化的动态按钮效果
可自由摆放的多极导航菜单
经典实用的浮动菜单特效代码
跳舞的机器人
某购物网站的经典导航特效
超级漂亮的图片弹性效果
