javascript+css实现自定义网页右键菜单
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
javascript+css实现自定义网页右键菜单
熟悉window操作系统的用户都知道右键菜单(上下文菜单)简洁明了、操作简便,然而浏览器自带的右键菜单的功能却都是基于网页整页操作,例如“添加到收藏夹”、“查看源文件”、“打印”,很少涉及到网页内容的操作,因此它的实用性并不大。实际上用Javascript+Css可以实现效果相当不错的网页右键菜单,截图如下:
图示:网页右键菜单效果图
特点:样式替换+多级菜单+阴影效果
网页右键菜单程序流程图如下:
本程序由一个js文件和aspx文件组成,没有后台CS代码。
js代码如下:
//禁用右键菜单
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.repl ace("px",""));
var ChildPanelHeight=parseInt(ChildPanel.style.width.rep lace("px",""));
//获取父亲菜单Div(下面简称父面板)
var FramePanel=event.srcElement;
//获取父面板宽度和高度
var PanelWidth=FramePanel.offsetWidth;
var PanelHeight=FramePanel.offsetHeight;
//获取鼠标坐标
var MouseX=event.clientX;
var MouseY=event.clientY;
//获取鼠标在父面板的偏移位置
var MouseOffsetWidth=event.offsetX;
var MouseOffsetHeight=event.offsetY;
//获取网页窗口宽度和高度
var WindowWidth=document.body.offsetWidth;
var WindowHeight=document.documentElement.offsetHeight;
//如果鼠标X坐标+面板宽度+子面板宽度>网页窗口宽度,则面板左边显示
if((MouseX-MouseOffsetWidth+PanelWidth+ChildPanelWidth)> =WindowWidth)
{
x=MouseX-MouseOffsetWidth-ChildPanelWidth-3;
}
else
{