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

《javascriptcss实现自定义网页右键菜单》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、javascript+css实现自定义网页右键菜单熟悉window操作系统的用户都知道右键菜单(上下文菜单)简洁明了、操作简便， 然而浏览器自带的右键菜单的功能却都是基于网页整页操作，例如“添加到收藏夹”、“查看源文件”、“打印”，很少涉及到网页内容的操作，因此它的实用性并不大。实际上用Javascript+Css可以实现效果相当不错的网页右键菜单，截图如下： 图示：网页右键菜单效果图特点：样式替换+多级菜单+阴影效果网页右键菜单程序流程图如下：本程序由一个js文件和aspx文件组成，没有后台CS代码。js代码如下：    

2、pe="text/javascript">    //禁用右键菜单    document.oncontextmenu=ContextMenu;    //鼠标右击事件    function ContextMenu()    ...{       //创建两个变量,作为菜单出现的坐标       var x;       var y;       //获取菜单外部Div(下面简称面板)       var FramePanel=document.getElementById("FrameDiv");       //获取面板宽度和高度    

3、   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.bo

4、dy.offsetWidth;       var WindowHeight=document.documentElement.offsetHeight;              //如果鼠标X坐标+面板宽度>网页窗口宽度,则面板左边显示       if((MouseX+PanelWidth)>=WindowWidth)       ...{            x=MouseX-PanelWidth-20;       }       else       ...{            x=MouseX;       }       

5、 //如果鼠标Y坐标+面板高度>网页窗口高度,则面板上边显示       if((MouseY+PanelHeight)>=WindowHeight)       ...{            y=MouseY-PanelHeight-20;       }       else       ...{            y=MouseY;       }         //显示面板       FramePanel.style.left=x;       FramePanel.style.top=y;       FramePanel.

6、style.display="block";              //隐藏二级菜单       document.getElementById("ChildDiv").style.display="none";              return false;//这句代码即等于event.returnValue=false;    }        //鼠标选择该菜单,参数说明:arg为该菜单Div,imageUrl指要替换的image地址,hasChildMenu指该菜单是否有子菜单,childPanelId指子菜单ID(如果有子菜

7、单的话)    function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId)    ...{        //替换背景图片(图片路径为相对路径)        arg.style.backgroundImage="url('"+imageUrl+"')";        //改变div背景颜色        arg.style.backgroundColor="#1665CB";        //改变字体颜色        arg.style.color="#ffffff"

8、;                //如果该菜单下有子菜单        if(hasChildMenu)        ...{