js 单击式的下拉菜单效果实例
2013-08-13 00:00
776 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>js 单击式的下拉菜单效果</title> <style> .div1 { width: 120px; height: 20px; line-height:20px; text-align:center; } .div2 {width: 120px; position:absolute; left:0; top:10px;visibility:hidden; } .div2 a{ display:block;} </style> </head> <body> <script language="JavaScript"> var zindex=100 function dropit2(whichone){ if (window.themenu&&themenu.id!=whichone.id) themenu.style.visibility="hidden" themenu=whichone if (document.all){ themenu.style.left=document.body.scrollLeft+event.clientX-event.offsetX themenu.style.top=document.body.scrollTop+event.clientY-event.offsetY+18 if (themenu.style.visibility=="hidden"){ themenu.style.visibility="visible" themenu.style.zIndex=zindex++} else{ hidemenu()}}} function dropit(e,whichone){ if (window.themenu&&themenu.id!=eval(whichone).id) themenu.visibility="hide" themenu=eval(whichone) if (themenu.visibility=="hide") themenu.visibility="show" else themenu.visibility="hide" themenu.zIndex++ themenu.left=e.pageX-e.layerX themenu.top=e.pageY-e.layerY+19 return false} function hidemenu(whichone){ if (window.themenu) themenu.style.visibility="hidden"} function hidemenu2(){ themenu.visibility="hide"} if (document.all) document.onclick=hidemenu </script> <span class="div1" onClick="dropit2(dropmenu);event.cancelBubble=true;return false"> <a href="###" onClick="if(document.layers) return dropit(event, 'document.dropmenu')">[点击显示菜单]</a> </span> <div class="div2" id="dropmenu"> <a href="http://www.jb51.net">脚本之家</a> <a href="#">个性名字网</a> <a href="#">个性名字网</a> </div> </body> </html> </td> </tr> </table>
相关文章推荐
- js 单击式的下拉菜单效果实例
- Js点击弹出下拉菜单效果实例
- js实现会跳动的日历效果(完整实例)
- js实现简洁大方的二级下拉菜单效果代码
- 纯JS实现出生日期[年月日]下拉菜单效果
- js(JavaScript)实现TAB标签切换效果的简单实例
- JS实现仿UC浏览器前进后退效果的实例代码
- js 鼠标经过显示隐藏效果实例
- js实现全国省份城市级联下拉菜单效果代码
- js实例入门一(打开关闭门效果)
- JS实现切换标签页效果实例代码
- js实现点击左右按钮轮播图片效果实例
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- JS onmousemove鼠标移动坐标接龙DIV效果实例
- js实现带圆角的多级下拉菜单效果
- js实现楼层效果的简单实例
- js实现点击向下展开的下拉菜单效果代码
- js中国地区三级联动下拉菜单效果分析
- JS平滑无缝滚动实现———实现首页广告自动滚动效果(附实例)