学院首页
>
网页制作
>
Javascript
>网页防Windows菜单功能实现
网页防Windows菜单功能实现
作者：supercheng 来源：51js.com 添加时间：2006-5-21 9:22:26
代码片段如下:
<HTML><HEAD><TITLE>Document Title</TITLE><style>.menuBorder1 { position:absolute; left:-1000; top:-1000; background-color:#C6C3C6; /* light gray */ border: solid 1px; border-left-color:#C6C3C6; /* light gray */ border-top-color:#C6C3C6; /* light gray */ border-bottom-color:black; border-right-color:black; margin:0 0 0 0; overflow:none; visibility:visible; }.menuBorder2{ position:absolute; top:0; left:0; background-color:#C6C3C6; /* light gray */ overflow:none; margin: 4px 0px 4px 0px; border: solid 1px; border-left-color:white; border-top-color:white; border-bottom-color:#848284; /* dark grey */ border-right-color:#848284; /* dark grey */ cursor:default; }.menuTable {}.menuRow { font-size: 9pt; color:black; background-color:transparent; cursor:default; height:12pt; }.menuImageCell { text-align:left; cursor:default; }.menuCaptionCell { text-align:left; cursor:default; }.menuArrowCell { text-align:right; font-size: 8pt; cursor:default; }#MENUINSERT { position:absolute; top:0; left:0;}</style><script>var menus = new Array()function MenuRegister(item) { menus[menus.length] = item return (menus.length - 1)}function MenuItem(caption, command, image, submenu, separator) //创建自己的菜单目录的对象{ this.caption = caption; this.command = command; this.image = image; this.submenu = submenu; this.separator = (separator) ? true : false; this.id = MenuRegister(this); }function MenuItemOnClick(obj) //响应鼠标oncklick事件{ var item = menus[obj.menuid] var menub1 = document.all['MENU' + item.parent + 'B1'] window.event.cancelBubble = true if (item == null) return if ((typeof item.command) == 'function') item.command() if ((typeof item.command) == 'string') window.location = item.command}function MenuItemOnMouseOver(obj) //鼠标在菜单上移动时的事件处理{ var item = menus[obj.menuid] var parent = menus[item.parent] var menub1 = document.all['MENU' + item.parent + 'B1'] var fromElement = window.event.fromElement var toElement = window.event.toElement window.event.cancelBubble = true //鼠标在菜单边缘,则什么也不做 if ((fromElement != null) && (toElement != null)) { if (fromElement.menuid == toElement.menuid) return; } obj.style.backgroundColor = '#000084' // 改变背景颜色为蓝色 obj.style.color = 'white'// 改变文字颜色为白色 //处理子菜单状态 //关闭当前打开的子菜单 if ((parent.submenu != null) && (parent.submenu != item.submenu)) { parent.submenu.hide() parent.submenu = null } // 打开当前菜单目录的子菜单 if ((item.submenu != null) && (parent.submenu != item.submenu)) { item.submenu.top = menub1.offsetTop + obj.offsetTop; item.submenu.left = menub1.offsetLeft + obj.offsetWidth; item.submenu.show() parent.submenu = item.submenu return; }}function MenuItemOnMouseOut(obj) //鼠标移出菜单的事件处理{ var item = menus[obj.menuid] var parent = menus[item.parent] var toElement = window.event.toElement window.event.cancelBubble = true if ((toElement != null) && (toElement.menuid == parent.id)) { if ((parent.submenu != null) && (parent.submenu != item)) { parent.submenu.hide() parent.submenu = null } } if ((window.event.fromElement != null) && (window.event.toElement != null)) { if (window.event.fromElement.menuid == window.event.toElement.menuid) return; } obj.style.backgroundColor = "transparent" obj.style.color = 'black'}function MenuItemToString() { if (this.separator) return "<tr><td class=menuSep colspan=3><hr></td></tr>\n" return " <tr class=menuRow \n" + " onMouseOver='MenuItemOnMouseOver(this)'\n" + " onMouseOut='MenuItemOnMouseOut(this)'\n" + " onClick='MenuItemOnClick(this)'\n" + " menuid=" + this.id + " >\n" + " <td class=menuImageCell noWrap=noWrap menuid=" + this.id + ">" + ((this.image != null) ? " <img class=menuImage menuid=" + this.id + " src='" + this.image + "'> " : " " ) + "</td>\n" + " <td class=menuCaptionCell noWrap=noWrap menuid=" + this.id + ">" + this.caption + "</td>\n" + " <td class=menuArrowCell noWrap=noWrap menuid=" + this.id + " " + ((this.submenu != null) ? "style='font-family:Webdings'>4" : "style='font-family:times'>") + "</td>\n" + " </tr>\n";}MenuItem.prototype.toString = MenuItemToString;function Menu(top, left) //将鼠标的位置作为菜单的左顶点创建菜单{ this.items = new Array() this.top = top this.left = left this.id = MenuRegister(this) this.update = true; MENUINSERT.insertAdjacentHTML('BeforeEnd', this.borders())}function MenuAddItem(item) //添加子菜单,子菜单继承其父菜单的的属性{ this.items[this.items.length] = item item.parent = this.id}function MenuShow(noDisplay) //实现菜单的显示{ var menub1 = document.all['MENU' + this.id + 'B1'] var menub2 = document.all['MENU' + this.id + 'B2'] if (this.update) { menub2.innerHTML = this.getTable() this.update = false } var menu = document.all['MENU' + this.id] menub1.style.top = this.top menub1.style.left = this.left menub2.style.width = menu.offsetWidth + 2 menub2.style.height = menu.offsetHeight + 2 menub1.style.width = menu.offsetWidth + 4 menub1.style.height = menu.offsetHeight + 12 //处理在窗口边缘单击鼠标时,菜单显示的位置 // 菜单超出窗口底边时,上移 if ((menub1.offsetTop + menub1.offsetHeight) > (MenuBodyRef.offsetHeight - 4)) menub1.style.top = MenuBodyRef.offsetHeight - menub1.offsetHeight - 4 // 菜单超出窗口右边时,左移 if ((menub1.offsetLeft + menub1.offsetWidth) > (MenuBodyRef.offsetWidth - 24)) menub1.style.left = MenuBodyRef.offsetWidth - menub1.offsetWidth - 24 // 菜单超出窗口顶边时,下移 if (menub1.offsetTop < 0) menub1.style.top = 0 // 菜单超出窗口左边时,右移 if (menub1.offsetLeft < 0) menub1.style.left = 0 if (noDisplay) { menub1.style.top = -1000 menub1.style.left = -1000 } else { menub1.style.visibility = 'visible' }}function MenuHide() //实现菜单的隐藏{ var menub1 = document.all['MENU' + this.id + 'B1'] if (this.submenu != null) this.submenu.hide() menub1.style.visibility = 'hidden' menub1.style.top = -1000 menub1.style.left = -1000}function MenuBorders() //响应鼠标的onclick事件{ return "<div id=MENU" + this.id +"B1 class=menuBorder1 menuid=" + this.id + " onClick='window.event.cancelBubble = true'>\n" + " <div id=MENU" + this.id +"B2 class=menuBorder2 menuid=" + this.id + ">\n" + " </div>\n" + "</div>\n";}function MenuTable() //创建用于装菜单内容的表格,便于菜单界面的排版{ var str str = "<table id=MENU" + this.id + "\n" + " cellpadding=0 cellspacing=0 border=0 class=menuTable>\n" for (var i=0; i < this.items.length; i++) str += this.items[i]; str += "</table>\n" return str}Menu.prototype.addItem = MenuAddItem;Menu.prototype.borders = MenuBorders;Menu.prototype.getTable = MenuTable;Menu.prototype.show = MenuShow;Menu.prototype.hide = MenuHide;var MenuBodyRef;function MenuInit() //创建菜单所在的层,达到显示和隐藏的效果{ for(var i in document.all){ if (document.all[i].tagName == 'BODY') { MenuBodyRef = document.all[i] MenuBodyRef.insertAdjacentHTML('AfterBegin', '<div id=MENUINSERT></div>') break } }}var mainMenu = null;function DocOnLoad() //在此添加菜单内容.{ var submenu MenuInit(); mainMenu = new Menu(100, 20); submenu = new Menu(0,0) submenu.addItem(new MenuItem('流行歌曲', '#')) submenu.addItem(new MenuItem('民族风采', '#')) submenu.addItem(new MenuItem('乐曲欣赏', '#')) submenu.addItem(new MenuItem('交响乐', '#')) submenu.show(true) mainMenu.addItem(new MenuItem('音乐空间', null, null, submenu, null)) submenu = new Menu(0,0) submenu.addItem(new MenuItem('杂家杂文', '#')) submenu.addItem(new MenuItem('宏篇巨著', '#')) submenu.addItem(new MenuItem('诗词歌赋', '#')) submenu.show(true) mainMenu.addItem(new MenuItem('文学殿堂', null, null, submenu, null)) mainMenu.addItem(new MenuItem('软件下载', '#')) mainMenu.addItem(new MenuItem('在线游戏', '#')) submenu = new Menu(0,0) submenu.addItem(new MenuItem('网上定购', '#')) submenu.addItem(new MenuItem('家居房产', '#')) submenu.addItem(new MenuItem('股票交易', '#')) submenu.show(true) mainMenu.addItem(new MenuItem('社区服务', '#', null, submenu)) mainMenu.addItem(new MenuItem('聊天室', '#')) mainMenu.addItem(new MenuItem('收藏', 'h#')) mainMenu.addItem(new MenuItem(null, null, null, null, true)) mainMenu.addItem(new MenuItem('收索', '#', 'find.gif')) mainMenu.addItem(new MenuItem('离开', new Function('DocOnClick()'), 'x.gif')) mainMenu.show(true)} var flag = falsefunction DocOnClick() //菜单隐藏和显现{ if (flag) { mainMenu.hide() } else { mainMenu.left = window.event.x mainMenu.top = window.event.y mainMenu.show() } flag = ! flag}</script><BODY onLoad="DocOnLoad()" onClick="DocOnClick()"> 单击鼠标左键,会弹出一个菜单。功能也比较齐全。如当前选项的突显，子菜单的添加等等。有一个问题是每次单击鼠标左键，都会有菜单弹出。解决的办法是，限定鼠标在某一范围内单击才弹出菜单。这要根据具体的页面来具体设定。</div> <div class="page1">上一篇：<a href='0652620202692970.htm'>窗口从天而降</a><br />下一篇：<a href='0652620202664048.htm'>让网页适应不同的浏览器和分辨率2</a></div> </div> <div id="ad1"><div id="rlist">站内搜索</div><div id="tuijian"><form method="post" action="/edu/search.asp"> <input type="text" name="keyword" size="16"> <input type="submit" name="Submit" value="搜索"> </form> </div><script src="/js/eduright.js" type="text/javascript"></script></div> </div> <script src="/foot.js" type="text/javascript"></script> <script src="/gg/bottom.js" type="text/javascript"></script> </body> </html>
代码片段如下: 代码片段如下: 代码片段如下: