web前端
数据库
编程语言
搜索技术
关于本站
登录
登 录
下次自动登录
学步园
返回顶部
查看留言
转到底部
现在的位置:
首页
> 综合 > 正文
RSS
滑出式网页导航菜单
2011年01月16日
⁄ 综合
⁄ 共 5841字 ⁄ 字号
小
中
大
⁄
评论关闭
代码如下:
<!-- ++++++++++++++++++++++++++++滑出式网页导航菜单++++++++++++++++++++++++++ --><br /> <html><br /> <head><br /> <!-- +++++++++++++++++++++++++++++++++以下代码加入<head>区域++++++++++++++++++++++++++++++++++ --><br /> <style><br /> body,td,a {font-size:9pt;color:black;text-decoration:none}<br /> .normal {padding:2px}<br /> .up {padding:1px;border:#999999 1px solid;background:#cccccc}<br /> .down {padding:1px;border:dbdbdb 1px solid;background:dbdbdb}<br /> .menuv {filter: revealTrans(transition=23,duration=0.5);padding:2px}<br /> </style><br /> </head><br /> <!-- +++++++++++++++++++++++++++++++++以下代码加入<body>区域++++++++++++++++++++++++++++++++++ --><br /> <body onMouseMove="move()" onLoad="bodyload()"><br /> <script><br /> //闪烁的表格边框<br /> function flashit(){if(!document.all)return;if (td123.style.borderColor=="black")td123.style.borderColor="#999999";else td123.style.borderColor="black"}setInterval("flashit()",500)<br /> //渐入的效果,改变alpha值<br /> 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)}<br /> //拖动层的js<br /> var over=false,down=false,divleft,divtop;function move(){if(down){plane.style.left=event.clientX-divleft;plane.style.top=event.clientY-divtop;}}<br /> //滑动层<br /> function bodyload()<br /> {<br /> if(plane.style.pixelTop!=0)<br /> {<br /> plane.style.pixelTop-=10<br /> setTimeout('bodyload()',1)<br /> }<br /> }<br /> //渐变显示层<br /> function Show(divid) {<br /> divid.filters.revealTrans.apply();<br /> divid.style.visibility = "visible";<br /> divid.filters.revealTrans.play();<br /> }<br /> function Hide(divid) {<br /> divid.filters.revealTrans.apply();<br /> divid.style.visibility = "hidden";<br /> divid.filters.revealTrans.play();<br /> }<br /> </script><br /> <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"><br /> <table id="td123" cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4"><br /> <tr><br /> <td bgcolor="#cccccc" height="20" style="BORDER:#999999 1px solid;cursor:move"><br /> <div align="center">多级滑动菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this),Show(menu1)<br /> " onMouseOut="this.className='normal',low(this),menu1.style.visibility='hidden'" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'" ><br /> <div align="right">有下级菜单>></div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> 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'" ><br /> <div align="right">有下级菜单>></div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align="right">无下级菜单>></div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align="right">无下级菜单>></div><br /> </td><br /> </tr><br /> </table><br /> <div id="menu1" style="position:absolute;top:24px;left:96px; z-index:1; visibility: hidden; width: 105"<br /> onMouseOver=this.style.visibility='visible'<br /> onMouseOut=this.style.visibility='hidden' class="menuv"><br /> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align="center">子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> </table><br /> </div><br /> <div id="menu2" style="position:absolute;top:45px;left:96; z-index:1; visibility: hidden; width: 105"<br /> onMouseOver=this.style.visibility='visible'<br /> onMouseOut=this.style.visibility='hidden' class="menuv"><br /> <table cellspacing=2 width=100 border=0 style="BORDER:#999999 1px solid;cursor:hand" cellpadding="0" bgcolor="f4f4f4" align="right"><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align="center">子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> <tr><br /> <td class=normal onMouseDown="this.className='down'"<br /> onMouseOver="this.className='up',high(this)" onMouseOut="this.className='normal',low(this)" style="filter:alpha(opacity=50)"onMouseUp="this.className='up'"><br /> <div align=center>子菜单</div><br /> </td><br /> </tr><br /> </table><br /> </div><br /> </div><br /> </body><br /> </html>
[Ctrl+A 全选 提示:你可先修改部分代码,再点运行代码]
返回
【上篇】
json2.js 不能反序列化时间属性问题
【下篇】
海的女儿英语读后感
作者:
lzmpdq
该日志由 lzmpdq 于13年前发表在综合分类下，最后更新于 2011年01月16日.
转载请注明:
滑出式网页导航菜单 | 学步园
+复制链接
抱歉!评论已关闭.
书签
招生
白云飘飘网
青岛房产网
最新文章New
网站优化可以收获更好的收益
robots在网页开发中起到了一定的
SEO引擎优化可以更好的方便搜索
Dreamweaver教程很实用，值得学习
很多的photoshop教程值得学习，你
编程语言很重要，特别是对于计算
数据库非常常见，也非常实用！
H5指的是第5代html，不同于传统企
HTML是什么，该怎么制作？
本站推荐
为什么PHP的吉祥物是一头大象
作业的提交和监控（二）
作业的提交和监控（一）
Boost – Function 分析
奇技淫巧 – C/C++ 宏自身
模板的 SFINAE 原则
Octopress 和 Git 的结合
Electric-fence 介绍