JavaScript CSS創建右擊菜單效果代碼

2019-11-21 01:32:19

字體：大中小

來源：轉載

供稿：網友

效果圖：

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>css和javascript創建頁面右鍵菜單</title> <style type="text/css"> body { font-family: "宋體"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋體"; line-height: 20px; cursor: default; visibility: hidden; } .skin1 { padding-top: 4px; cursor: default; font: menutext; text-align: left; font-family: "宋體"; font-size: 10pt; width: 100px; background-color: menu; border: 1 solid buttonface; visibility: hidden; border: 2 outset buttonhighlight; } </style> <script language='javascript'> function load1(){ if (document.all && window.print) { document.oncontextmenu = showmenuie5; document.onclick = hidemenuie5; } } function showmenuie5() { //獲取當前鼠標右鍵按下后的位置，據此定義菜單顯示的位置 var rightedge = document.body.clientWidth-event.clientX; var bottomedge = document.body.clientHeight-event.clientY; //如果從鼠標位置到窗口右邊的空間小于菜單的寬度，就定位菜單的左坐標（Left）為當//前鼠標位置向左一個菜單寬度 if (rightedge <ie5menu.offsetWidth) ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth; else //否則，就定位菜單的左坐標為當前鼠標位置 ie5menu.style.left = document.body.scrollLeft + event.clientX; //*如果從鼠標位置到窗口下邊的空間小于菜單的高度，就定位菜單的上坐標（Top）為當前鼠標位置向上一個菜單高度 if (bottomedge <ie5menu.offsetHeight) ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight; else ie5menu.style.top = document.body.scrollTop + event.clientY; //設置菜單可見 ie5menu.style.visibility = "visible"; return false; } function hidemenuie5() { ie5menu.style.visibility = "hidden"; } //jumptoie5()函數實現鼠標點擊右鍵菜單中的層時發生的事情，也就是執行選項 function jumptoie5() { if (event.srcElement.getAttribute("target") != null) window.open(event.srcElement.url, event.srcElement.getAttribute("target")); else window.location = event.srcElement.url; } load1() </script> </head> <body> 右鍵菜單創建測試效果吧！ <div   class="iwvjtn8m0"   id="ie5menu" class="skin0"> <div onclick="alert('后退請三思！)">后退</div> <div onclick="alert('祝你前程似錦，大膽往前走吧！')">前進</div> <hr> <div url="http://m.survivalescaperooms.com" target="_blank" onclick="jumptoie5()">武林網</div> <div url="http://m.survivalescaperooms.com/photoshop/" target="_blank" onclick="jumptoie5()">photoshop教程</div> <div url="http://m.survivalescaperooms.com/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">javascript</div> <div url="http://m.survivalescaperooms.com/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">vbscript</div> <hr> <div url="http://m.survivalescaperooms.com/softs/index.html" target="_blank" onclick="jumptoie5()">軟件下載</div> <div url="http://www.mydown.com/codes/" target="_blank" onclick="jumptoie5()">源碼下載</div> <hr> <div url="http://m.survivalescaperooms.com/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">正則表達式</div> <div url="http://m.survivalescaperooms.com/support.htm" onclick="jumptoie5()">聯系我</div> </div>　　 </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

代碼解釋：
1、在頁面載入時，先執行load1()方法
首先檢驗是不是IE瀏覽器，如果當前瀏覽器是Internet Explorer，document.all就返回真。則下面的定義就應該有效。也就是說當檢查到客戶端使用的瀏覽器是IE的時候那么當用戶產生右鍵事件時就調用函數 showmenuie5，當用戶產生左鍵事件時就調用函數hidemenuie5。
2、接著我們要考慮如何通過函數showmenuie5和函數hidemenuie5來實現菜單的顯示和隱藏。
當然，這里的菜單并不是真正意義的右鍵菜單，而是我們自己做的一個div，在這個div中裝上我們想要裝的東西。通過鼠標事件調用函數來控制它的顯隱，這就達到了使用鼠標右鍵一樣的效果了。
這一塊的最外層是一個id為ie5menu的div，我們定義了它的樣式為skin0，你也可以根據自定義其他樣式，然后替換skin0。
3、點擊菜單選項后的操作
jumptoie5()函數實現鼠標點擊右鍵菜單中的層時發生的事情，也就是執行選項

上一篇：在IE,Firefox,Safari,Chrome,Opera瀏覽器上調試javascript

下一篇：js+CSS 圖片等比縮小并垂直居中實現代碼