右击鼠标后弹出菜单效果,模拟系统复制粘贴按钮,可自定义菜单数量和内容,实用的鼠标右键弹出菜单特效代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js实现自定义右键弹出菜单特效_武鸣人</title> <meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren"> <meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。"> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/24px arial;} #ment_www_wuming_ren{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;} #ment_www_wuming_ren li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;} #ment_www_wuming_ren li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;} #ment_www_wuming_ren li.active{background:#999;} #ment_www_wuming_ren li.active a{color:#fff;background:#8f8f8f;} #ment_www_wuming_ren li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(img/ico.png) no-repeat;} #ment_www_wuming_ren li em.cur{background-position:0 0;} #ment_www_wuming_ren li em.copy{background-position:0 -24px;} #ment_www_wuming_ren li em.paste{background-position:0 -48px;} </style> <script type="text/javascript"> window.onload = function () {//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) var oMenu = document.getElementById("ment_www_wuming_ren"); var aLi = oMenu.getElementsByTagName("li"); //加载后隐藏自定义右键菜单 oMenu.style.display = "none"; //菜单鼠标移入/移出样式 for (i = 0; i < aLi.length; i++) { //鼠标移入样式 aLi[i].onmouseover = function () { this.className = "active" }; //鼠标移出样式 aLi[i].onmouseout = function () { this.className = "" } } //自定义菜单 document.oncontextmenu = function (event) { var event = event || window.event; var style = oMenu.style; style.display = "block"; style.top = event.clientY + "px"; style.left = event.clientX + "px"; return false; }; //页面点击后自定义菜单消失 document.onclick = function () { oMenu.style.display = "none" } };//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀) </script> </head> <body> <a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr> <!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。--> <script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script> <script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script> <center>自定义右键菜单,请在页面点击右键查看效果。</center> <ul id="ment_www_wuming_ren"> <li><em class="cut"></em><a href="javascript:;">剪切</a></li> <li><em class="copy"></em><a href="javascript:;">复制</a></li> <li><em class="paste"></em><a href="javascript:;">粘贴</a></li> </ul> </body> </html>
本文来自武鸣人网站,转载请注明出处