您當前位置：首頁 > web前端 > jscript > 代碼實例：CSS+JavaScript創建右擊菜單

代碼實例：CSS+JavaScript創建右擊菜單

來源：程序員人生發布時間：2014-05-04 05:25:23 閱讀次數：3213次

<%@ page language="java" pageEncoding="GBK" %><!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;elseie5menu.style.top = document.body.scrollTop + event.clientY; //設置菜單可見 liehuo.netie5menu.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 id="ie5menu" class="skin0"><div onclick="alert('后退請三思！)">后退</div><div onclick="alert('祝你前程似錦，大膽往前走吧！')">前進</div><hr><div url="http://homepage.yesky.com" target="_blank" onclick="jumptoie5()">網頁淘吧</div><div url="http://www.bewww.net/" target="_blank" onclick="jumptoie5()">速查手冊</div><div url="http://wiki.mapbar.com/wiki2_0/edit.jsp?gid=1876" target="_blank" onclick="jumptoie5()">淘吧地圖</div><div url="http://news.sohu.com/20081123/n260795459.shtml" target="_blank" onclick="jumptoie5()">征稿啟事</div><hr><div url="http://soft.yesky.com" target="_blank" onclick="jumptoie5()">天極軟件</div><div url="http://www.mydown.com/soft/" target="_blank" onclick="jumptoie5()">天極網站</div><hr><div url="http://liutao-2006-126-com.javaeye.com" target="_blank" onclick="jumptoie5()">關于本站</div><div url="http://www.vxbq.cn" onclick="jumptoie5()">建站學院</div></div>　　</body></html>

代碼解釋：

1、在頁面載入時，先執行load1()方法

首先檢驗是不是IE瀏覽器，如果當前瀏覽器是Internet Explorer，document.all就返回真。則下面的定義就應該有效。也就是說當檢查到客戶端使用的瀏覽器是IE的時候那么當用戶產生右鍵事件時就調用函數 showmenuie5，當用戶產生左鍵事件時就調用函數hidemenuie5。

2、接著我們要考慮如何通過函數showmenuie5和函數hidemenuie5來實現菜單的顯示和隱藏。

當然，這里的菜單并不是真正意義的右鍵菜單，而是我們自己做的一個div，在這個div中裝上我們想要裝的東西。通過鼠標事件調用函數來控制它的顯隱，這就達到了使用鼠標右鍵一樣的效果了。

這一塊的最外層是一個id為ie5menu的div，我們定義了它的樣式為skin0，你也可以根據自定義其他樣式，然后替換skin0。

3、點擊菜單選項后的操作

jumptoie5()函數實現鼠標點擊右鍵菜單中的層時發生的事情，也就是執行選項

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 每月少掙2000塊但是我還是選擇阿里媽媽

下一篇 關于旅游SNS網站：一個人網站站長的見解

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

代碼實例：CSS+JavaScript創建右擊菜單