JS+CSS右键操作、动态波浪、菜单栏、loading

最新推荐文章于 2024-02-10 20:40:15 发布

琪公子呀

最新推荐文章于 2024-02-10 20:40:15 发布

阅读量961

点赞数

分类专栏： JavaScript 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/125006059

版权

一、右键进行一些操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

    <style type="text/css">
        .s-move-content-outer {
            border: 1px black solid;
            width: 200px;
            height: 200px;
            position: relative;
            outline: none;
            user-select: none;
        }

        .vpopmenu {
            position: absolute;
            width: 200px;
            border-radius: 5px;
            background-color: rgba(167, 237, 191, 0.9);
            border: rgb(133, 238, 152);
            z-index: 9999;
            padding: 2px;
            display: none;
        }

        .vpopmenu>div {
            padding: 2px 2px 2px 30px;
            height: 24px;
        }

        .vpopmenu>div:hover {
            background-color: rgba(245, 239, 89, 0.30);
        }
    </style>
</head>

<body>
    <div class="s-move-content-outer" tabIndex="1">
        <div class="s-move-content-header">div1</div>
        <div>内容1</div>
    </div>

    <div id="r_menu" class="vpopmenu">
        <div id="menu_create" onclick="createMenu();">新增</div>
        <div id="menu_copy" onclick="copyMenu();">页内复制</div>
        <div id="menu_copy" onclick="delMenu();">删除</div>
    </div>
</body>
<script type="text/javascript">
    bindMenu();
    var menu = document.getElementById("r_menu");
    function bindMenu() {
        //给所有class=s-move-content-outer的div都加上右键菜单
        var $BIPanel = $("div[class='s-move-content-outer']").contextmenu(function (ev) {
            var oEvent = ev || event;
            //自定义的菜单显示
            menu.style.display = "block";
            //让自定义菜单随鼠标的箭头位置移动
            menu.style.left = oEvent.clientX + "px";
            menu.style.top = oEvent.clientY + "px";
            //return false阻止系统自带的菜单，
            //return false必须写在最后，否则自定义的右键菜单也不会出现
            return false;
        });
    }
    function createMenu () {
        alert('新增');
    }
    function copyMenu () {
        alert('页内复制');
    }
    function delMenu () {
        alert('删除');
    }

    //实现点击document，自定义菜单消失
    document.onclick = function () {
        menu.style.display = "none";
    }
</script>
</html>

二、css波浪图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0&