用Javascript实现Agent(实现右键菜单)(2)

王朝html/css/js·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

用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";

}

今天的效果如下:

明天美化一下菜单,实现动态添加菜单内容

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航