练习日志，登录框拖拽

最新推荐文章于 2024-06-10 23:53:23 发布

nekops

最新推荐文章于 2024-06-10 23:53:23 发布

阅读量58

点赞数

本文链接：https://blog.csdn.net/qq_45441981/article/details/119214390

版权

<!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">
    <title>练习</title>
    <style>
        html,
        body {
            margin: 0px;
            position: relative;
            z-index: -1;
            width: 100%;
            height: 100%;
            user-select: none;
        }
        
        h2 {
            width: 100%;
            text-align: center;
            z-index: -1;
            position: absolute;
            cursor: pointer;
        }
        
        .box {
            width: 500px;
            height: 400px;
            left: 37%;
            top: 30%;
            /* margin: 0px auto; */
            z-index: 3;
            position: absolute;
            border: black 1px solid;
            background-color: white;
            display: none;
        }
        
        .title {
            width: 500px;
            height: 30px;
            text-align: center;
            border: black 1px solid;
            position: absolute;
            cursor: default;
        }
        
        .close {
            width: 15px;
            height: 15px;
            border: 1px black solid;
            font-size: 3px;
            text-align: center;
            position: absolute;
            left: 500px;
        }
        
        .bg {
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0, .3);
            z-index: 2;
            position: absolute;
            display: none;
        }
        
        form {
            width: 200px;
            height: 300px;
            left: 30%;
            top: 40%;
            position: absolute;
        }
    </style>
    <script>
        onload = function() {
            var oH2 = document.getElementsByTagName("h2")[0];
            var oBg = document.getElementsByClassName("bg")[0];
            var oBox = document.getElementsByClassName("box")[0];
            var oTitle = document.getElementsByClassName("title")[0];
            var oClose = document.getElementsByClassName("close")[0];
            //弹出
            oH2.addEventListener("click", function() {
                    oBg.style.display = "block";
                    oBox.style.display = "block";
                })
                //关闭
            oClose.addEventListener("click", function() {
                    oBg.style.display = "none";
                    oBox.style.display = "none";
                })
                //拖动效果
            oTitle.addEventListener("mousedown", function(e) {
                oTitle.style.cursor = "move";
                var X = oBox.offsetLeft; //获取box的x轴
                var Y = oBox.offsetTop; //y轴
                var oX = e.pageX;
                var oY = e.pageY;
                //距离
                var oXcut = oX - X;
                var oYcut = oY - Y;
                //鼠标移动使用window
                document.addEventListener("mousemove", move);

                function move(e) {
                    //鼠标减去间距等于box的位置
                    oBox.style.left = e.pageX - oXcut + "px";
                    oBox.style.top = e.pageY - oYcut + "px";
                }
                document.addEventListener("mouseup", function() {
                    document.removeEventListener("mousemove", move);
                })
            })


        }
    </script>
</head>

<body>
    <h2>点击弹出登录框</h2>
    <div class="box">
        <div class="title">用户登录</div>
        <div class="close">X</div>
        <form action="" method="post">
            <input type="text" class="text">&nbsp;&nbsp;&nbsp;<button>登录</button>
        </form>
    </div>
    <div class="bg"></div>
</body>

</html>

nekops

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
练习日志，登录框拖拽

<!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"> <title>练.
复制链接

扫一扫