当前位置: 首页 > 图文教程 > 网络编程 > Javascript > Menu

Javascript
JavaScript 仿歌词效果
javascript 网页上跳动的文字
jquery 屏蔽一个区域内的所有元素,禁止输入
VBScript 实现文字遮罩
用按钮触发Javascript动态生成一个表格的代码
文字瞬间从左到右切换显示的JavaScript代码
jquery 插件开发方法小结
JS 操作日期 顺便实现 上一周 和 下一周 功能
struts2 jquery 打造无限层次的树
js文件中调用js的实现方法小结
写入cookie的JavaScript代码库 cookieLibrary.js
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
javascript Keycode对照表
JavaScript 动态添加表格行 使用模板、标记
JS window.opener返回父页面的应用
JavaScript 高仿真可控弹簧振子实现代码
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
JavaScript 图片放大效果及代码说明
js 操作符实例代码
JavaScript 文本域字体大小选择功能

Javascript 中的 Menu


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

<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}



</style>



<body  onmousemove="move()">



<div  style="position:absolute;z-index:1;width:1;height:1;  left:  100;  top:  100"  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),menu1.style.visibility='visible'"  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),menu2.style.visibility='visible'"  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>



<script  language="JavaScript">



<!--



function  flashit(){



if  (!document.all)



return



if  (td123.style.borderColor=="#666666")



td123.style.borderColor="#999999"



else



td123.style.borderColor="#666666"



}



setInterval("flashit()",  500)



//-->



</script>



<script  language="javascript">



<!--



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)



}



//-->



</script>



<script>



var  over=false,down=false,divleft,divtop;



function  move(){



if(down){



plane.style.left=event.clientX-divleft;



plane.style.top=event.clientY-divtop;



}



}



</script>



    <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'>  



        <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="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'>  



        <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>