JavaScript CSS創(chuàng)建右擊菜單效果代碼

更新時間：2008年12月02日 15:02:52 作者：

右擊菜單效果

效果圖：

<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>css和javascript創(chuàng)建頁面右鍵菜單</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() { //獲取當前鼠標右鍵按下后的位置，據(jù)此定義菜單顯示的位置 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; //設(shè)置菜單可見 ie5menu.style.visibility = "visible"; return false; } function hidemenuie5() { ie5menu.style.visibility = "hidden"; } //jumptoie5()函數(shù)實現(xiàn)鼠標點擊右鍵菜單中的層時發(fā)生的事情，也就是執(zhí)行選項 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> 右鍵菜單創(chuàng)建測試效果吧！ <div   class="7enveg2"   id="ie5menu" class="skin0"> <div onclick="alert('后退請三思！)">后退</div> <div onclick="alert('祝你前程似錦，大膽往前走吧！')">前進</div> <hr> <div url="http://www.dhdzp.com" target="_blank" onclick="jumptoie5()">腳本之家</div> <div url="http://www.dhdzp.com/photoshop/" target="_blank" onclick="jumptoie5()">photoshop教程</div> <div url="http://www.dhdzp.com/list/list_3_1.htm" target="_blank" onclick="jumptoie5()">javascript</div> <div url="http://www.dhdzp.com/list/list_114_1.htm" target="_blank" onclick="jumptoie5()">vbscript</div> <hr> <div url="http://www.dhdzp.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://www.dhdzp.com/list/list_6_1.htm" target="_blank" onclick="jumptoie5()">正則表達式</div> <div url="http://www.dhdzp.com/support.htm" onclick="jumptoie5()">聯(lián)系我</div> </div>　　 </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

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

您可能感興趣的文章: