JS实现登录框拖动功能 

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        body {
            background-color: rgb(175, 178, 175);
        }
        
        .btn {
            display: block;
            margin: 0 auto;
            width: 300px;
            height: 50px;
            cursor: pointer;
            background-color: rgb(48, 126, 248);
            border: 0;
            color: #fff;
        }
        
        .login {
            position: fixed;
            display: none;
            width: 500px;
            height: 300px;
            background-color: #fff;
            box-shadow: 2px 2px 2px 5px #fff;
            left: 50%;
            top: 50%;
            border-radius: 10px;
            transform: translate(-50%, -50%);
        }
        
        .login h3 {
            text-align: center;
            font-weight: 500;
            margin-top: 10px;
            margin-left: 20px;
        }
        
        .login ul li {
            text-align: center;
        }
        
        .login ul li label {
            display: inline-block;
            min-width: 100px;
        }
        
        .login ul li input {
            height: 35px;
            width: 300px;
            margin-top: 20px;
            padding-left: 10px;
            border: 1px solid #ccc;
        }
        
        .login ul li button {
            margin-top: 30px;
            margin-left: 20px;
            width: 250px;
            height: 40px;
            background-color: #fff;
            border: 1px solid #ccc;
            font-weight: 600;
            outline: none;
            cursor: pointer;
        }
        
        .login span {
            position: absolute;
            font-size: 12px;
            width: 40px;
            height: 40px;
            top: -23px;
            right: -23px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            border: 1px solid #ccc;
            background-color: #fff;
            cursor: pointer;
        }
        
        .box {
            width: 100%;
            height: 100%;
            background-color: rgb(176, 179, 176);
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('.btn');
            var login = document.getElementById('login');
            var btn_close = document.getElementById('close');
            var title = document.getElementById('title');
            // 点击后弹出登录框
            btn.addEventListener('click', function() {
                login.style.display = 'block';
            });
            // 点击关闭后隐藏登录弹框
            btn_close.addEventListener('click', function() {
                login.style.display = 'none';
            });
            // 当我鼠按下登录框就可以实现拖动效果
            title.addEventListener('mousedown', function(e) {
                this.style.cursor = 'move';
                var x = e.pageX - login.offsetLeft;
                var y = e.pageY - login.offsetTop;
                document.addEventListener('mousemove', move);

                function move(e) {
                    login.style.cursor = 'move';
                    login.style.left = e.pageX - x + 'px';
                    login.style.top = e.pageY - y + 'px';
                }
                当鼠标松开时
                login.addEventListener('mouseup', function() {
                    document.removeEventListener('mousemove', move);
                });
            });
        });
    </script>
</head>

<body>
    <button class="btn">点击弹出登录框</button>
    <div class="login" id="login">
        <form action="">
            <h3 id="title">登录会员</h3>
            <ul>
                <li><label for="uName">用户名：</label>
                    <input type="text" name="" placeholder="请输入用户名">
                </li>
                <li>
                    <label for="password">登录密码：</label>
                    <input type="password" name="" placeholder="请输入密码">
                </li>
                <li><button type="submit">登录会员</button></li>
            </ul>
        </form>
        <span id="close">关闭</span>
    </div>
</body>

</html>

 

posted @ 2021-06-25 18:39  唯爱小喵  阅读(93)  评论(0)    收藏  举报