不错的js右键弹出菜单特效

1个月前 (04-12 12:31)阅读31回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4714
  • 级别管理员
  • 主题942
  • 回复2
楼主

右击鼠标后弹出菜单效果,可自己修改弹出的菜单选项内容,通过js实现这个右键弹出菜单特效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>不错的js右键弹出菜单特效_武鸣人</title>
<style type="text/css">
.wuming_ren
{
position:absolute;
top:100px;
left:100px;
width:200px;
height:200px;
background-color:white;
border:1px solid pink;
}
.wuming_ren_2
{
font-family:"宋体";
color:#6699CC;
margin-left:10px;
margin-top:5px;
list-style-type:none;
cursor:default;
}
.wuming_ren_3
{
margin-left:10px;
margin-top:5px;
background-color:#CCFFFF;
list-style-type:none;
cursor:default;
}
</style>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div style="margin-left:auto; margin-right:auto; height:250px; width:60%;background-color: #000000" id="www_wuming_ren">
</div>
<input type="hidden" id="value1" value="4" />
<input type="hidden" id="value2" value="5" />
<script type="text/javascript">
//右键菜单类
function menu_wumingren(div,menuDiv,menuList,classList)
{//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
var oThis = this;
this._menuList = 
{
}
this._classList = 
{
objClass:'',
MenuClass:'',
liAbleClass:'',
liMouseOverClass:''
}
this.Init = function()
{
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
this._obj = $(div);
this._obj.oncontextmenu = function(e){oThis.ShowMenu(e)};
this._obj.className = this._classList.objClass;
document.onclick = function(){oThis.HiddenMenu()};
objToObj(this._classList, classList);
objToObj(this._menuList, menuList);
}
this.CreateMenu = function()
{
if($(menuDiv))
{
alert("该ID已被占用");
return;
}
this._menu = document.createElement("DIV");
this._menu.id = menuDiv;
                this._menu.oncontextmenu = function(e){stopBubble(e)};
this._menu.className = this._classList.MenuClass;
this._menu.style.display = "none";
document.body.appendChild(this._menu);
}
this.CreateMenuList = function()
{
for(var pro in this._menuList)
{
var li = document.createElement("LI");
li.innerHTML = pro;
this._menu.appendChild(li);
li.className = this._classList.liAbleClass;
li.onclick = this._menuList[pro];
li.onmouseover = function(){oThis.ChangeLiClass(this,oThis._classList.liMouseOverClass)}
li.onmouseout = function(){oThis.ChangeLiClass(this,oThis._classList.liAbleClass)}
}
}
this.ChangeLiClass = function(obj,name)
{
obj.className = name
}
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
this.ShowMenu = function(e)
{
var e = e || window.event;
stopBubble(e);
var offsetX = e.clientX;
var offsetY = e.clientY;
with(this._menu.style)
{
display = "block";
top = offsetY + "px";
left = offsetX + "px";
}
}
this.HiddenMenu = function()
{
this._menu.style.display = "none";
}
this.Init();
this.CreateMenu();
this.CreateMenuList();
}
function stopBubble(oEvent)
{
if(oEvent.stopPropagation) oEvent.stopPropagation();
else oEvent.cancelBubble = true;
 if(oEvent.preventDefault) oEvent.preventDefault();
    else oEvent.returnValue = false;
}
function $(div)
{
return 'string' == typeof div ? document.getElementById(div) : div;
}
function objToObj(destination,source)
{
for(var pro in source)
{
destination[pro] = source[pro];
}
return destination;
}
//构造右键菜单
function Edit()
{
alert("武鸣人提示您,您点击了编辑按钮");
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
function Delete()
{
alert("武鸣人提示您,您点击了删除按钮");
}
var menuList = 
{
编辑:Edit,
删除:Delete
}
var classList = 
{
MenuClass:'wuming_ren',
liAbleClass:'wuming_ren_2',
liMouseOverClass:'wuming_ren_3'
}
var www_wuming_ren = new menu_wumingren("www_wuming_ren","testDiv",menuList,classList)
</script>
</body>
</html>


0
0
收藏0
回帖

不错的js右键弹出菜单特效 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息