欢迎您访问我爱IT技术网,今天小编为你分享的电脑教程是通过网络精心收集筛选的最优节选:“自定义网页右键菜单”,请注意:文中所谈及的内容不代表本站的真正观点,也请不要相信各种联系方式。下面是关于网络上自定义网页右键菜单的整理详细信息
本经验使用JavaScript和简单的HTML实现网页的右键菜单的自定义。
操作前的准备
已安装Dreamweaver或其它网页编辑器的电脑一台实现效果
HTML网页打开,一开始显示如图。

鼠标右键之后显示自定义右键菜单。

HTML代码
HTML代码:
- JavaScript 学习
- 响应用户操作
- 事件驱动
- 元素属性操作
- 函数传参
- JavaScript组成
- JavaScript出现的位置、优缺点
- 变量、类型、变量作用域
- 闭包
- 运算符
- 程序流程控制
- 定时器的使用

CSS代码
CSS代码:
body, div, ul, li { margin:0; padding:0; }
body { font:12px/1.5 \5fae\8f6f\96c5\9ed1; }
ul { list-style-type:none; }
#cen {font-size:36px; color:#60F; text-align:center;}
#div1 { position:absolute; display:none; }
#div1 ul { position:absolute; float:left; border:1px solid #979797;background:#f1f1f1; padding:2px; box-shadow:2px 2px 2px rgba(0, 0, 0, .6); width:230px; overflow:hidden; }
#div1 ul li { float:left; clear:both; height:24px; cursor:pointer; line-height:24px; white-space:nowrap; padding:0 30px; width:100%; display:inline-block; }
#div1 ul li:hover { background:#E6EDF6; border:1px solid #B4D2F6; }

JS代码
JavaScript代码:
document.oncontextmenu=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
oDiv.style.display='block';
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
return false;
};
document.onclick=function ()
{
var oDiv=document.getElementById('div1');
oDiv.style.display='none';
};

用户类似问题:
问题1:JS+DIV实现自定义html右键菜单
JS实现自定义右键菜单 #container { text-align : center; width : 500px; height : 500px; border : 1px solid blue; margin : 0 auto; } .skin { width : 100px; border : 1px solid gray; padding : 2px; visibility : hidden; position : a... >>详细
问题2:网页设计中怎么自定义文本框右键菜单啊
去我空间里看吧.前几天看到了这个解决问题的办法了. 250000270 >>详细
问题3:JS的自定义右键菜单如何让他只有在点击了链接后才...
有点耐心去偿试着来吧 没好办法 >>详细
问题4:JS自定义的网页右键菜单,在火 狐上没效果,求解决...
你通过什么机制实现的,跟踪鼠标位置的DIV? >>详细
问题5:怎么改变网页中a标签的右键菜单
添加鼠标右键菜单的最简单方法:windows优化大师了,里面的系统性能优化,系统个性设置,右边的右键设置,更多设置,自定义右键。 或者超级兔子等优化工具都有此功能,不推荐手动添加注册表,软件添加修改鼠标右键菜单,简单!安全!快捷! 全部... >>详细
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
