|
|
用Javascript实现Agent(实现右键菜单)
既然是显示右键菜单，那么我们就要截获对精灵按右键时的事件oncontextmenu
然后将右键菜单的html封装到一个函数，一上来这个菜单层是隐藏的
function getMenuHtml()
{
var menuHtml ="<div id=menu style=\"text-align: left;position: absolute; visibility: hidden; width: 85px; z-index: 200;padding:1px\">";
menuHtml += "<table border=1 width=100 height=100>";
menuHtml += "<tr>";
menuHtml += "<td>";
menuHtml += "Menu1";
menuHtml += "</td>";
menuHtml += "</tr>";
menuHtml += "</table>";
menuHtml += "</div>";
return menuHtml;
}
实现右键菜单，我们需要精灵截获oncontextmenu事件，需要对昨天的run函数进行一点小的修改
Agent.prototype.run=function()
{
var agentHtml = "";
agentHtml += "<img src="+this.imgAgent;
agentHtml += " id=\"agent1\"";
agentHtml += " style=\"position:absolute;left:"+this.agentLeft+";top:"+this.agentTop+";cursor:move\"";
agentHtml += " onselectstart=\"return false\"";
agentHtml += " onmousedown=\"mousedown(this)\"";
agentHtml += " onmouseup=\"mouseup()\"";
agentHtml += " onmousemove=\"mousemove()\"";
agentHtml += " oncontextmenu=\"return showRightMenu()\"";
agentHtml += ">";
agentHtml += getMenuHtml();
return document.write(agentHtml);
}
可以看出oncontextmenu调用的是showRightMenu函数，这个函数使菜单层可见，并且显示位置随着鼠标的位置而显示
注解：
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
event.clientX:鼠标点击的x轴位置
event.clientY:鼠标点击的y轴位置
/*
* 右键菜单 v1.0
* author: 清风
*/
function showRightMenu()
{
menu.style.left=document.body.scrollLeft+event.clientX
menu.style.top=document.body.scrollTop+event.clientY
menu.style.visibility="visible";
return false;
}
菜单现在可以显示了，如何使其消失呢？应当是用户点击任意位置就可消失
document.onclick=click
function click()
{
menu.style.visibility="hidden";
}
今天的效果如下:
明天美化一下菜单，实现动态添加菜单内容
|
|
