JS实现不使用图片仿Windows右键菜单效果代码_javascript技巧
程序员文章站
2022-03-14 17:02:57
...
本文实例讲述了JS实现不使用图片仿Windows右键菜单效果代码。分享给大家供大家参考,具体如下:
\n";
HTMLstr += "";
HTMLstr += "\n";
HTMLstr += "\n";
}
function AddExtendMenu(id,img,wh,name,parent)
{
var TempStr = "";
eval("A_"+parent+".length++");
eval("A_"+parent+"[A_"+parent+".length-1] = id");
TempStr += "
";
TempStr += "0 "+name+"
4";
TempStr += "
\n";
TempStr += "";
HTMLstr = HTMLstr.replace("",TempStr);
}
function AddItem(id,img,wh,name,parent,location)
{
var TempStr = "";
var ItemStr = "";
if(id == "sperator")
{
TempStr += ItemStr+"\n";
TempStr += "
";
TempStr += "";
HTMLstr = HTMLstr.replace("",TempStr);
return;
}
if(HTMLstr.indexOf(ItemStr) != -1)
{
alert("I_"+id+"already exist!");
return;
}
TempStr += ItemStr+"\n";
TempStr += "
";
TempStr +=""+wh+" "+ name+" ";//
TempStr += "
\n";
TempStr += "";
HTMLstr = HTMLstr.replace("",TempStr);
}
function GetMenu()
{
return HTMLstr;
}
function I_OnMouseOver(id,parent)
{
var Item;
if(parent != "rbpm")
{
var ParentItem;
ParentItem = eval("P_"+parent);
ParentItem.className="over";
}
Item = eval("I_"+id);
Item.className="over";
HideAll(parent,1);
}
function I_OnMouseOut(id)
{
var Item;
Item = eval("I_"+id);
Item.className="out";
}
function I_OnMouseUp(id,parent,location)
{
var ParentMenu;
window.event.cancelBubble=true;
OnClick();
ParentMenu = eval("E_"+parent);
ParentMenu.display="none";
if(location == null)
eval("Do_"+id+"()");
else
window.open(location);
}
function P_OnMouseOver(id,parent)
{
var Item;
var Extend;
var Parent;
if(parent != "rbpm")
{
var ParentItem;
ParentItem = eval("P_"+parent);
ParentItem.className="over";
}
HideAll(parent,1);
Item = eval("P_"+id);
Extend = eval("E_"+id);
Parent = eval("E_"+parent);
Item.className="over";
Extend.style.display="block";
Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4;
if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth)
Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8;
if(Extend.style.posLeft document.body.scrollTop+document.body.clientHeight)
Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight;
if(Extend.style.posTop document.body.scrollLeft+document.body.clientWidth)
PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth;
if(PopMenu.style.posLeft document.body.scrollTop+document.body.clientHeight)
PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight;
if(PopMenu.style.posTop
这里演示JS不使用图片仿Windows右键菜单效果,这款代码灵活使用了文鼎字,配合CSS和JS做出了这个和系统右键菜单很相似的东东。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/
具体代码如下:
极酷的多级右键菜单
\n";
TempStr += "\n";
TempStr += "";
TempStr += "
\n";
TempStr += "
\n";
TempStr += "";
TempStr += "";
HTMLstr = HTMLstr.replace("",TempStr);
eval("A_"+id+" = new Array()");
TempStr = "";
TempStr += "\n";
TempStr += " 请点击右键
上一篇: 详解Vue.js如何实现列表清单
下一篇: 微信小程序学习记录——记事本Demo
推荐阅读
-
js实现改进的仿蓝色论坛导航菜单效果代码_javascript技巧
-
JS+CSS实现仿支付宝菜单选中效果代码_javascript技巧
-
js实现改进的仿蓝色论坛导航菜单效果代码_javascript技巧
-
JS实现的仿QQ空间图片弹出效果代码_javascript技巧
-
JS+CSS实现仿支付宝菜单选中效果代码_javascript技巧
-
原生JS实现仿淘宝网左侧商品分类菜单效果代码_javascript技巧
-
JS实现的仿QQ空间图片弹出效果代码_javascript技巧
-
js实现仿爱微网两级导航菜单效果代码_javascript技巧
-
JS实现仿Windows7风格的网页右键菜单效果代码_javascript技巧
-
JS实现仿Windows7风格的网页右键菜单效果代码_javascript技巧