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>

    <title></title>

    <meta charset="GBK">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <style type="text/css">

        #drawing

        {

            text-align: center;

            width: 500px;

            height: 500px;

            border: 1px solid blue;

            margin: 0 auto;

            overflow: auto;

            display: block;

        }

        body, div, ul, li

        {

            margin: 0;

            padding: 0;

        }

        body

        {

            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;

        }

        ul

        {

            list-style-type: none;

        }

        #menu ul

        {

            position: absolute;

            float: left;

            border: 1px solid #979797;

            background: #f1f1f1;

            padding: 2px;

            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);

            width: 230px;

            overflow: hidden;

        }

        #menu ul li

        {

            float: left;

            clear: both;

            height: 24px;

            cursor: pointer;

            line-height: 24px;

            white-space: nowrap;

            padding: 0 30px;

            width: 100%;

            display: inline-block;

        }

        #menu ul li:hover

        {

            background: #E6EDF6;

            border: 1px solid #B4D2F6;

        }

        .skin

        {

            width: 100px;

            padding: 2px;

            visibility: hidden;

            position: absolute;

        }

    </style>

    <script type="text/javascript" src="http://api.51ditu.com/js/ajax.js"></script>

    <script type="text/javascript">

        //-->右键自定义菜单

        window.onload = function () {

            var drawing = document.getElementById('drawing');

            var menu = document.getElementById('menu');

            /*显示菜单*/

            function showMenu() {

                var evt = window.event || arguments[0];

                /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/

                var rightedge = drawing.clientWidth - evt.clientX;

                var bottomedge = drawing.clientHeight - evt.clientY;

                /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/

                if (rightedge < menu.offsetWidth)

                    menu.style.left = drawing.scrollLeft + evt.clientX - menu.offsetWidth + "px";

                else

                /*否则，就定位菜单的左坐标为当前鼠标位置*/

                    menu.style.left = drawing.scrollLeft + evt.clientX + "px";

                /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/

                if (bottomedge < menu.offsetHeight)

                    menu.style.top = drawing.scrollTop + evt.clientY - menu.offsetHeight + "px";

                else

                /*否则，就定位菜单的上坐标为当前鼠标位置*/

                    menu.style.top = drawing.scrollTop + evt.clientY + "px";

                /*设置菜单可见*/

                menu.style.visibility = "visible";

                LTEvent.addListener(menu, "contextmenu", LTEvent.cancelBubble);

            }

            /*隐藏菜单*/

            function hideMenu() {

                menu.style.visibility = 'hidden';

            }

            LTEvent.addListener(drawing, "contextmenu", LTEvent.cancelBubble);

            LTEvent.addListener(drawing, "contextmenu", showMenu);

            LTEvent.addListener(document, "click", hideMenu);

        }

    </script>

</head>

<body>

    <div id="drawing">

    </div>

    <!--自定义右键菜单-->

    <div id="menu" class="skin">

        <ul>

            <li><strong>HTML 学习</strong></li>

            <li>HTML 元素</li>

            <li>HTML 属性</li>

            <li>HTML 标题</li>

            <li>HTML 段落</li>

            <li>HTML 图像</li>

            <li>HTML 表格</li>

            <li>HTML 列表</li>

            <li>HTML 布局</li>

            <li>表单</li>

        </ul>

    </div>

</body>

</html>
巴特西

html中实现某区域内右键自定义菜单

最新文章

热门文章
