宝哥软件园

JavaScript模拟鼠标右键菜单效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-16

本文实例为大家分享了Java脚本语言模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下效果图:

具体代码:

!DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题右键菜单/title style type=' text/CSS ' * { margin : 0;padd : 0;} #菜单{ width: 254px/*背景-颜色: # CCC*/font-size : 12px;位置:固定;top: 0pxleft: 0px/*高度: 240 px*//*填充-左侧: 26px*/padding-top : 2px;border:1px固体# cccdisplay:无;} #菜单李{列表式:无;线高: 25px左边距:-1px;左填充left: 26px} #菜单Li :悬停{底色: # 4281;color : # fff }/style/head body ul id=' menu ' Li返回(二)/李莉前进(女)/李莉从新加载(右)/李莉另存为(一)/李莉打印(P)/李莉查看网页源代码(五)/李莉查看网页信息(一)/李莉审查元素(N)/li /ul脚本类型=' text/JavaScript ' var menu=document。getelementbyid('菜单');文件。oncontext menu=function(e){ var e=e | | window。事件;//兼容console.log(e.clientX,e . clienty);控制台。日志(e);//单击显示div菜单。风格。display=' block//设置定义//判断鼠标坐标是否大于视口宽度-块本身宽度var cakLeft=(e . clientx文档。文档元素。客户端宽度-菜单。偏移)?(文档。文档元素。客户端宽度-菜单。 e .客户端x;var cakTop=(e . clienty文档。文档元素。客户端高度-菜单。抵消光线)?(文档。文档元素。客户端高度-菜单。偏右): e . clienty菜单。风格。left=CAKleft ' px菜单。风格。top=CAktop ' px返回false}菜单。onclick=function(e){ var e=e | | window。事件;e . cancelubble=true//阻止冒泡。}文档。onclick=function(){ menu。风格。显示='无';}/脚本/正文/html希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。

更多资讯
游戏推荐
更多+