《javascriptcss实现自定义网页右键菜单.docxVIP

javascript+css实现自定义网页右键菜单熟悉window操作系统的用户都知道右键菜单(上下文菜单)简洁明了、操作简便，?然而浏览器自带的右键菜单的功能却都是基于网页整页操作，例如 “添加到收藏夹”、“查看源文件”、“打印”，很少涉及到网页内容的操作，因此它的实用性并不大。实际上用Javascript+Css可以实现效果相当 不错的网页右键菜单，截图如下：?图示：网页右键菜单效果图特点：样式替换+多级菜单+阴影效果网页右键菜单程序流程图如下：本程序由一个js文件和aspx文件组成，没有后台CS代码。js代码如下：?script?type=text/javascript?//禁用右键菜单?document.oncontextmenu=ContextMenu;?//鼠标右击事件?function?ContextMenu()?{?//创建两个变量,作为菜单出现的坐标?var?x;?var?y;?//获取菜单外部Div(下面简称面板)?var?FramePanel=document.getElementById(FrameDiv);?//获取面板宽度和高度?var?PanelWidth=parseInt(FramePanel.style.width.replace(px,));?var?PanelHeight=parseInt(FramePanel.style.height.replace(px,));?//获取鼠标坐标?var?MouseX=event.clientX;?var?MouseY=event.clientY;?//获取网页窗口宽度和高度?var?WindowWidth=document.body.offsetWidth;?var?WindowHeight=document.documentElement.offsetHeight;??//如果鼠标X坐标+面板宽度网页窗口宽度,则面板左边显示?if((MouseX+PanelWidth)=WindowWidth)?{?x=MouseX-PanelWidth-20;?}?else?{?x=MouseX;?}?//如果鼠标Y坐标+面板高度网页窗口高度,则面板上边显示?if((MouseY+PanelHeight)=WindowHeight)?{?y=MouseY-PanelHeight-20;?}?else?{?y=MouseY;?}??//显示面板?FramePanel.style.left=x;?FramePanel.style.top=y;?FramePanel.style.display=block;??//隐藏二级菜单?document.getElementById(ChildDiv).style.display=none;??return?false;//这句代码即等于event.returnValue=false;?}??//鼠标选择该菜单,参数说明:arg为该菜单Div,imageUrl指要替换的image地址,hasChildMenu指该菜单是否有子菜单,childPanelId指子菜单ID(如果有子菜单的话)?function?MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId)?{?//替换背景图片(图片路径为相对路径)?arg.style.backgroundImage=url(+imageUrl+);?//改变div背景颜色?arg.style.backgroundColor=#1665CB;?//改变字体颜色?arg.style.color=#ffffff;??//如果该菜单下有子菜单?if(hasChildMenu)?{?//创建两个变量,作为菜单出现的坐标?var?x;?var?y;?//获取子菜单Div(下面简称子面板)?var?ChildPanel=document.getElementById(childPanelId);?//debugger;?//获取子面板宽度和高度?var?ChildPanelWidth=parseInt(ChildPanel.style.width.replace(px,));?var?ChildPanelHeight=parseInt(ChildPanel.style.width.replace(px,));?//获取父亲菜单Div(下面简称父面板)?var?FramePanel=event.srcElement;?//获取父面板宽度和高度?var?PanelWidth=FramePanel.offsetWidth;?var?PanelHeight=FramePanel.offsetHeight;?//获取鼠标坐标?var?MouseX=event