contextmenu自定义上下文菜单

最新推荐文章于 2024-06-01 09:49:11 发布

Aman920_

最新推荐文章于 2024-06-01 09:49:11 发布

阅读量850

点赞数

分类专栏： JavaScript 文章标签： contextmenu javascript

本文链接：https://blog.csdn.net/MrZZhou/article/details/76862570

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

今晚在复习事件的时候，看到这个事件，就想写写看，感觉硬显太硬，于是自己加了点动画，这个过程中，也额外收获了些知识。使用js（在一段代码中）“连续”设置节点的style中同一属性，那么属性上的动画是来不及触发的，它并不会排队依次把动画执行完，视觉上就像直接跳过了动画，所以在代码中我使用了定时器，下面是demo代码。

<!DOCTYPE html>
<html>
<head>
    <title>temp</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
            width:100%;
        }
        div.box{
            display: none;
            width: 0px;
            background-color: yellow;
            text-align: center;
            overflow: hidden;
            transition: width 0.2s; 
            -webkit-transition: width 0.2s;
        }
        div.box ul{
            padding: 0;
            margin: 0;
        }
        div.box li{
            display: block;
            list-style: none;
            border: 1px solid black;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><a href="javascript:void(0);">menu001</a></li>
            <li><a href="javascript:void(0);">menu002</a></li>
            <li><a href="javascript:void(0);">menu003</a></li>
            <li><a href="javascript:void(0);">menu004</a></li>
            <li><a href="javascript:void(0);">menu005</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            document.body.addEventListener("contextmenu",function(event){
                var div = document.getElementsByClassName("box")[0];
                event.preventDefault? event.preventDefault() : window.event.returnValue = false;
                var pointx = event.clientX;
                var pointy = event.clientY;
                div.style.position = "fixed";
                div.style.top = pointy+"px";
                div.style.left = pointx+"px";
                div.style.width = "0px";
                div.style.display = "block";
                setTimeout(function(){
                    div.style.width = "100px";
                },100);
            });
            window.addEventListener("click",function(event){
                var div = document.getElementsByClassName("box")[0];
                div.style.display = "none";
            });
        };
    </script>
</body>
</html>

Aman920_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
contextmenu自定义上下文菜单

今晚在复习事件的时候，看到这个事件，就想写写看，感觉硬显太硬，于是自己加了点动画，这个过程中，也额外收获了些知识，就是使用js（在一段代码中）“连续”设置节点的style中同一属性，那么属性上的动画是来不及触发的，它并不会排队依次把动画执行完，视觉上就像直接跳过了动画，所以在代码中我使用了定时器，下面是demo代码。<!DOCTYPE html><html><head> <title>
复制链接

扫一扫

专栏目录