在鼠标点击的位置 ,添加一个div ,类似手表右键菜单

2018-07-20    来源:open-open

容器云强势上线!快速搭建集群,上万Linux镜像随意使用
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="utf-8">
        <title> New Document </title>
        <script src="styles/default/js/jquery-2.1.0.min.js"></script>
    </head>
    <style type="text/css">
        .modle {
            width: 100px;
            cursor: pointer;
            text-align: center;
        }
        #popmenu {
            display: none;
            position: absolute;
            width: 100px;
            height: 100px;
            margin-top: 10px;
            margin-left: 10px;
            border: 1px solid black;
            background-color: white
        }
    </style>
 
    <body>
        <div class="modle">
            click me
        </div>
        <div id="popmenu">
            内容
        </div>
    </body>
    <script type="text/javascript">
        var menu = document.getElementById("popmenu");
        $(".modle").click(function(event) {
            e = event ? event : window.event;
            t = e.target || e.srcElement;
            menu.style.left = getPointerX(e) + "px";
            menu.style.top = getPointerY(e) + "px";
            menu.style.display = "block";
        });
 
        function getPointerX(event) {
            return event.pageX || (event.clientX + (document.documentElement.scrollLeft                                 || document.body.scrollLeft));
        }
 
        function getPointerY(event) {
            return event.pageY || (event.clientY + (document.documentElement.scrollTop
                    || document.body.scrollTop));
        }
    </script>
 
</html>

标签: isp

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点!
本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。

上一篇: C#同步网络时间和本地时间

下一篇:python实现爬虫下载美女图片