js代码如下： 复制代码 代码如下: <BR>//禁用右键菜单 <BR>document.oncontextmenu=ContextMenu; <BR>//鼠标右击事件 <BR>function ContextMenu() <BR>{ <BR>//创建两个变量,作为菜单出现的坐标 <BR>var x; <BR>var y; <BR>//获取菜单外部Div(下面简称面板) <BR>var FramePanel=document.getElementById("FrameDiv"); <BR>//获取面板宽度和高度 <BR>var PanelWidth=parseInt(FramePanel.style.width.replace("px","")); <BR>var PanelHeight=parseInt(FramePanel.style.height.replace("px","")); <BR>//获取鼠标坐标 <BR>var MouseX=event.clientX; <BR>var MouseY=event.clientY; <BR>//获取网页窗口宽度和高度 <BR>var WindowWidth=document.body.offsetWidth; <BR>var WindowHeight=document.documentElement.offsetHeight; <BR>//如果鼠标X坐标+面板宽度>网页窗口宽度,则面板左边显示 <BR>if((MouseX+PanelWidth)>=WindowWidth) <BR>{ <BR>x=MouseX-PanelWidth-20; <BR>} <BR>else <BR>{ <BR>x=MouseX; <BR>} <BR>//如果鼠标Y坐标+面板高度>网页窗口高度,则面板上边显示 <BR>if((MouseY+PanelHeight)>=WindowHeight) <BR>{ <BR>y=MouseY-PanelHeight-20; <BR>} <BR>else <BR>{ <BR>y=MouseY; <BR>} <BR>//显示面板 <BR>FramePanel.style.left=x; <BR>FramePanel.style.top=y; <BR>FramePanel.style.display="block"; <BR>//隐藏二级菜单 <BR>document.getElementById("ChildDiv").style.display="none"; <BR>return false;//这句代码即等于event.returnValue=false; <BR>} <BR>//鼠标选择该菜单,参数说明:arg为该菜单Div,imageUrl指要替换的image地址,hasChildMenu指该菜单是否有子菜单,childPanelId指子菜单ID(如果有子菜单的话) <BR>function MenuOnMouseOver(arg,imageUrl,hasChildMenu,childPanelId) <BR>{ <BR>//替换背景图片(图片路径为相对路径) <BR>arg.style.backgroundImage="url('"+imageUrl+"')"; <BR>//改变div背景颜色 <BR>arg.style.backgroundColor="#1665CB"; <BR>//改变字体颜色 <BR>arg.style.color="#ffffff"; <BR>//如果该菜单下有子菜单 <BR>if(hasChildMenu) <BR>{ <BR>//创建两个变量,作为菜单出现的坐标 <BR>var x; <BR>var y; <BR>//获取子菜单Div(下面简称子面板) <BR>var ChildPanel=document.getElementById(childPanelId); <BR>//debugger; <BR>//获取子面板宽度和高度 <BR>var ChildPanelWidth=parseInt(ChildPanel.style.width.replace("px","")); <BR>var ChildPanelHeight=parseInt(ChildPanel.style.width.replace("px","")); <BR>//获取父亲菜单Div(下面简称父面板) <BR>var FramePanel=event.srcElement; <BR>//获取父面板宽度和高度 <BR>var PanelWidth=FramePanel.offsetWidth; <BR>var PanelHeight=FramePanel.offsetHeight; <BR>//获取鼠标坐标 <BR>var MouseX=event.clientX; <BR>var MouseY=event.clientY; <BR>//获取鼠标在父面板的偏移位置 <BR>var MouseOffsetWidth=event.offsetX; <BR>var MouseOffsetHeight=event.offsetY; <BR>//获取网页窗口宽度和高度 <BR>var WindowWidth=document.body.offsetWidth; <BR>var WindowHeight=document.documentElement.offsetHeight; <BR>//如果鼠标X坐标+面板宽度+子面板宽度>网页窗口宽度,则面板左边显示 <BR>if((MouseX-MouseOffsetWidth+PanelWidth+ChildPanelWidth)>=WindowWidth) <BR>{ <BR>x=MouseX-MouseOffsetWidth-ChildPanelWidth-3; <BR>} <BR>else <BR>{ <BR>x=MouseX-MouseOffsetWidth+PanelWidth-5; <BR>} <BR>//如果鼠标Y坐标+面板高度>网页窗口高度,则面板上边显示 <BR>if((MouseY-MouseOffsetHeight+ChildPanelHeight)>=WindowHeight-30) <BR>{ <BR>y=MouseY-MouseOffsetHeight-ChildPanelHeight-15; <BR>} <BR>else <BR>{ <BR>y=MouseY-MouseOffsetHeight+5; <BR>} <BR>//显示面板 <BR>ChildPanel.style.left=x; <BR>ChildPanel.style.top=y; <BR>ChildPanel.style.display="block"; <BR>} <BR>} <BR>//鼠标离开该菜单 <BR>function MenuOnMouseOut(arg,imageUrl,hasChildMenu,childPanelId) <BR>{ <BR>if(hasChildMenu) <BR>{ <BR>//子菜单div(以下简称子面板) <BR>var ChildPanel=document.getElementById(childPanelId); <BR>var ToElement=event.toElement; <BR>//这里要注意,鼠标有可能移动到子面板的子孙div中,此时event.ToElement的DOM元素!=ChildPanel(子面板),event.ToElement.parentNode=ChildPanel, <BR>if(ToElement==ChildPanel||ToElement.parentNode==ChildPanel) <BR>{ <BR>ChildPanel.style.display="block"; <BR>} <BR>else <BR>{ <BR>ChildPanel.style.display="none"; <BR>} <BR>} <BR>//替换背景图片(图片路径为相对路径) <BR>arg.style.backgroundImage="url('"+imageUrl+"')"; <BR>//改变div背景颜色 <BR>arg.style.backgroundColor="#ffffff"; <BR>//改变字体颜色 <BR>arg.style.color="#000000"; <BR>} <BR> 页面ASPX代码如下： 复制代码 代码如下: 无标题页 创建新文件夹 搜索新文件夹 删除该文件夹 全部删除 文件排序 名称 创建时间 类型 大小 注意这句： 这个控件是ASP.NET AJAX1.0中实现阴影效果的控件，因此要在aspx页面添加控件注册： 控件具体属性意义请查询百度。
