[读码时间] 自定义右键菜单

说明：代码取自网络，CSS中注释为笔者学习时添加，JS中的注释为原文所有！
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>自定义右键菜单</title>
    <style>
        body,ul,li{
            margin:0;
            padding:0;
        }
        body{
            font:12px/24px arial;
        }
        #menu{
            position:absolute;
            top:-9999px;
            left:-9999px;
            width:100px;
            border-radius:3px;/*圆角*/
            list-style-type:none;/*去除样式*/
            border:1px solid #8f8f8f;/*黑色*/
            padding:2px;
            background:#fff;/*白色*/
        }
        #menu li{
            position:relative;
            height:24px;
            padding-left:24px;
            background:#eaead7;
            vertical-align:top;
        }
        #menu li a{
            display:block;
            color:#333;/*黑色*/
            background:#fff;
            padding-left:5px;
            text-decoration:none;
        }
        #menu li.active{
            background:#999;
        }
        #menu li.active a{
            color:#fff;
            background:#8f8f8f;
        }
        #menu li em{
            position:absolute;
            top:0;
            left:0;
            width:24px;
            height:24px;
            background:url(img/ico.png) no-repeat;
        }
        #menu li em.cur{
            background-position:0 0;
        }
        #menu li em.copy{
            background-position:0 -24px;
        }
        #menu li em.paste{
            background-position:0 -48px;
        }
    </style>
    <script>
        window.onload = function () {
            var oMenu = document.getElementById("menu");
            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"
            }
        };
    </script>
</head>
<body>
    <center>自定义右键菜单，请在页面点击右键查看效果。</center>
    <ul id="menu">
        <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>
View Code
[读码时间] 自定义右键菜单

相关推荐
