学到浏览器默认行为 想到能不能自定义右键菜单
让自己的网页变得更有趣
查了资料 自己琢磨总结了一些 随便写了一下
以下是html
<!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></title> <link href="css/1.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="js/1.js"></script> </head> <body> <div id="rightMenu"> <ul> <li><strong>如何一个月内花完五个亿</strong></li> <li> 第一周 <ul> <li>去买一辆车</li> <li>去买一栋楼</li> <li>去买一个手机</li> <li>去买一个电脑</li> <li>去买点吃的</li> </ul> </li> <li> 第二周 <ul> <li>把车砸了再换一辆</li> <li>把楼炸了再买一栋</li> <li>把手机扔了再买一个</li> <li>把电脑少了再买一个</li> <li>把吃的东西都吐出去再去买点</li> </ul> </li> <li> 第三周 <ul> <li> 花不完怎么办 <ul> <li>找个女朋友</li> <li>买车</li> <li>买楼</li> <li>买手机电脑化妆品包</li> </ul> </li> <li>最后一周了</li> <li>还没花完怎么办</li> <li> 捐款 <ul> <li>建学校</li> <li>建敬老院</li> <li>修马路</li> </ul> </li> <li>终于花完了</li> <li>然而</li> <li> 有一个问题 <ul> <li>你并没有五个亿</li> <li>你还是一个穷逼</li> <li>洗洗睡吧</li> </ul> </li> </ul> </li> </ul> </body> </html>
以下为css
@charset "utf-8"; html, body { height:100%; overflow:hidden; } body, div, ul, li { margin:0; padding:0; } body { font:12px/1.5 5fae8f6f96c59ed1; } ul { list-style-type:none; } #rightMenu { position:absolute; top:-9999px; left:-9999px; } #rightMenu ul { float:left; border:1px solid #979797; background:url(../images/line.png) 24px 0 repeat-y #f1f1f1; padding:2px; box-shadow:2px 2px 2px rgba(0, 0, 0, .6); } #rightMenu ul li { float:left; clear:both; height:24px; cursor:pointer; line-height:24px; white-space:nowrap; padding:0 30px; } #rightMenu ul li.sub { background-repeat:no-repeat; background-position:right 9px; background-image:url(../images/arrow.png); } #rightMenu ul li.active { background-color:#f1f3f6; border-radius:3px; border:1px solid #aecff7; height:22px; line-height:22px; background-position:right -8px; padding:0 29px; } #rightMenu ul ul { display:none; position:absolute; }
以下为js
var getOffset = { top: function (obj) { return obj.offsetTop + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) }, left: function (obj) { return obj.offsetLeft + (obj.offsetParent ? arguments.callee(obj.offsetParent) : 0) } }; window.onload = function () { var oMenu = document.getElementById("rightMenu"); var aUl = oMenu.getElementsByTagName("ul"); var aLi = oMenu.getElementsByTagName("li"); var showTimer = hideTimer = null; var i = 0; var maxWidth = maxHeight = 0; var aDoc = [document.documentElement.offsetWidth, document.documentElement.offsetHeight]; oMenu.style.display = "none"; for (i = 0; i < aLi.length; i++) { //为含有子菜单的li加上箭头 aLi[i].getElementsByTagName("ul")[0] && (aLi[i].className = "sub"); //鼠标移入 aLi[i].onmouseover = function () { var oThis = this; var oUl = oThis.getElementsByTagName("ul"); //鼠标移入样式 oThis.className += " active"; //显示子菜单 if (oUl[0]) { clearTimeout(hideTimer); showTimer = setTimeout(function () { for (i = 0; i < oThis.parentNode.children.length; i++) { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } oUl[0].style.display = "block"; oUl[0].style.top = oThis.offsetTop + "px"; oUl[0].style.left = oThis.offsetWidth + "px"; setWidth(oUl[0]); //最大显示范围 maxWidth = aDoc[0] - oUl[0].offsetWidth; maxHeight = aDoc[1] - oUl[0].offsetHeight; //防止溢出 maxWidth < getOffset.left(oUl[0]) && (oUl[0].style.left = -oUl[0].clientWidth + "px"); maxHeight < getOffset.top(oUl[0]) && (oUl[0].style.top = -oUl[0].clientHeight + oThis.offsetTop + oThis.clientHeight + "px") },300); } }; //鼠标移出 aLi[i].onmouseout = function () { var oThis = this; var oUl = oThis.getElementsByTagName("ul"); //鼠标移出样式 oThis.className = oThis.className.replace(/s?active/,""); clearTimeout(showTimer); hideTimer = setTimeout(function () { for (i = 0; i < oThis.parentNode.children.length; i++) { oThis.parentNode.children[i].getElementsByTagName("ul")[0] && (oThis.parentNode.children[i].getElementsByTagName("ul")[0].style.display = "none"); } },300); }; } //自定义右键菜单 document.oncontextmenu = function (event) { var event = event || window.event; oMenu.style.display = "block"; oMenu.style.top = event.clientY + "px"; oMenu.style.left = event.clientX + "px"; setWidth(aUl[0]); //最大显示范围 maxWidth = aDoc[0] - oMenu.offsetWidth; maxHeight = aDoc[1] - oMenu.offsetHeight; //防止菜单溢出 oMenu.offsetTop > maxHeight && (oMenu.style.top = maxHeight + "px"); oMenu.offsetLeft > maxWidth && (oMenu.style.left = maxWidth + "px"); return false; }; //点击隐藏菜单 document.onclick = function () { oMenu.style.display = "none" }; //取li中最大的宽度, 并赋给同级所有li function setWidth(obj) { maxWidth = 0; for (i = 0; i < obj.children.length; i++) { var oLi = obj.children[i]; var iWidth = oLi.clientWidth - parseInt(oLi.currentStyle ? oLi.currentStyle["paddingLeft"] : getComputedStyle(oLi,null)["paddingLeft"]) * 2 if (iWidth > maxWidth) maxWidth = iWidth; } for (i = 0; i < obj.children.length; i++) obj.children[i].style.width = maxWidth + "px"; } };
感觉挺有趣的
有想法的小伙伴们可以去试试 内容自行想象 哈哈