多语言展示
当前在线:1296今日阅读:19今日分享:20

自定义网页右键菜单

本经验使用JavaScript和简单的HTML实现网页的右键菜单的自定义。
工具/原料

已安装Dreamweaver或其它网页编辑器的电脑一台

实现效果
1

HTML网页打开,一开始显示如图。

2

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

HTML代码

HTML代码:

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

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; }END

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';};END

注意事项

注意JavaScript代码的书写

推荐信息