| 标题 | js实现鼠标感应向下滑动隐藏菜单的方法 |
| 内容 | 这篇文章主要介绍了js实现鼠标感应向下滑动隐藏菜单的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#d1 { background-color: blue; border-bottom: white 2px outset; border-left: white 2px outset; border-right: white 2px outset; border-top: white 2px outset; left: 0px; position: absolute; top: 0px; visibility: hidden; width: 300px; layer-background-color: lightgreen } a{font-size:9pt;color:#000000} a:link{text-decoration:none} a:hover{text-decoration:none;color:#ffffff} a:visited{text-decoration:none} .40pt{font-size:40pt;color:#ub39a1;font-family:文鼎琥珀繁} </style> <script language=javascript> function menuin() //菜单隐藏 { if(n4) { cleartimeout(out_id) if( menu.top > menuh*-1+20+10 ) { menu.top -= 8 in_id = settimeout(menuin(), 1) } else if( menu.top > menuh*-1+20 ) { menu.top-- in_id = settimeout(menuin(), 1) } } else { cleartimeout(out_id) if( menu.pixeltop > menuh*-1+20+10 ) { menu.pixeltop -= 8 in_id = settimeout(menuin(), 1) } else if( menu.pixeltop > menuh*-1+20 ) { menu.pixeltop-- in_id = settimeout(menuin(), 1) } } } function menuout() //菜单显示 { if(n4) { cleartimeout(in_id) if( menu.top < -10) { menu.top += 4 out_id = settimeout(menuout(), 1) } else if( menu.top < 0) { menu.top++ out_id = settimeout(menuout(), 1) } } else { cleartimeout(in_id) if( menu.pixeltop < -10) { menu.pixeltop += 2 out_id = settimeout(menuout(), 1) } else if( menu.pixeltop < 0 ) { menu.pixeltop++ out_id = settimeout(menuout(), 1) } } } function fireover() { cleartimeout(f_out) f_over = settimeout(menuout(), 10) } function fireout() { cleartimeout(f_over) f_out = settimeout(menuin(), 10) } function init() { if(n4) { menu = document.d1 menuh = menu.document.height menu.top = menu.document.height*-1+20 menu.onmouseover = menuout menu.onmouseout = menuin menu.visibility = visible } else if(e4) { menu = d1.style menuh = d1.offsetheight d1.style.pixeltop = d1.offsetheight*-1+20 d1.onmouseover = fireover d1.onmouseout = fireout d1.style.visibility = visible } } f_over=f_out=in_id=out_id=null n4 = (document.layers)?1:0 e4 = (document.all)?1:0; </script> </head> <body onload=init()> <div id=d1> <table border=0 width=100%> <tbody> <tr> <td align=middle bgcolor=ub39a1 rowspan=2><b style=color: ub39a1> m<br> e<br> n<br> u</b></td> <td> <br><br><ul> <li><a href=#nogo> 选 项 1</a> </li> <li><a href=li#nogo> 选 项 2</a> </li> <li><a href=#nogo> 选 项 3</a> </li> <li><a href=#nogo> 选 项 4</a> </li> <li><a href=#nogo> 选 项 5</a> </li> </ul> </td> <td><br><br><ul> <li><a href=#nogo> 选 项 6</a> </li> <li><a href=#nogo> 选 项 7</a> </li> <li><a href=#nogo> 选 项 8</a> </li> <li><a href=#nogo> 选 项 9</a> </li> <li><a href=#nogo> 选 项 10</a> </li> </ul> </td> </tr> <tr> <td align=right colspan=2> </td> </tr> </tbody> </table> </div> </body> </html> 希望本文所述对大家的javascript程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。