jquery 制作出右键菜单

最新推荐文章于 2022-08-19 10:08:10 发布

天台的故事

最新推荐文章于 2022-08-19 10:08:10 发布

阅读量352

点赞数 1

分类专栏： HTMLCSSJS 文章标签： jquery

本文链接：https://blog.csdn.net/yuzengyuan/article/details/78657110

版权

HTMLCSSJS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

先看效果图:
这里写图片描述
下面贴上代码:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="../scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
    <title>右键菜单</title>
</head>

<style type="text/css">

body{
    font-family:verdana;
}

.right_menu{
    width: 200px;
    position:absolute;
    display:none;
}

.right_menu a{
    text-decoration:none;
    color: #7d7c7c;
    cursor: default;
}

ul li{
    list-style-type:none; 
    height: 30px;
    line-height:30px;
    color: #7d7c7c;
    text-align:center;
    border: #e2e2e2 1px solid;
    background-color:#ffffff;

}

.content{
    width: 700px;
    height: 200px;
    background-color: #9c9c9c;
    margin-left: 10%;
    padding-top: 40%;
    border: #e2e2e2 1px solid;
    color: #fff;
}


</style>

<body align="center">

    <div class="content">
        <h1>右键显示菜单</h1>
    </div>
</body>

</html>
<script type="text/javascript">

    $(document).ready(function(){


            $(document).on("contextmenu", ".content" ,function(e)
            {
                //移除提示框
                $(".right_menu").remove();
                var menu_list = "<div class='right_menu'><ul><a href='https://www.google.com.hk/?gws_rd=ssl'><li>谷歌</li></a><a href='https://www.hao123.com/?tn=90912598_hao_pg'><li>百度</li></a> <a href='https://www.taobao.com/'><li>淘宝</li></a> <a href='javascript:void(0)' onclick='location.reload()'><li>刷新</li></a></ul></div>";

                $(".content").append(menu_list);
                    $('.right_menu').css({
                        "top": e.pageY-20 + "px",
                        "left":  e.pageX-35 + "px"
                    }).slideDown(200);
                return false;
            });

            $(document).on("click", ".content",function(e)
            {
                //移除提示框
                $(".right_menu").remove();
            });

            //对右键菜单进行事件绑定
            $(document).on("mouseover", "ul li", function () {

                $(this).css('background-color','#e8e8e8');
            });
            $(document).on("mouseout", "ul li", function () {

                $(this).css('background-color','#ffffff');
            });

    });

</script>