点击登录 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        .box {
            width: 980px;
            height: 500px;
            margin: 50px auto;
            background-color: #FFFEE7;
            position: relative;
            text-align: center;
            overflow: hidden;
        }
        
        .mask {
            width: 980px;
            height: 500px;
            position: absolute;
            left: 0px;
            top: 0px;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }
        
        .main {
            width: 400px;
            height: 240px;
            padding: 15px;
            background-color: #FFFEE7;
            position: absolute;
            right: 50%;
            margin-right: -200px;
            bottom: 50%;
            margin-bottom: -120px;
            text-align: center;
            display: none;
        }
        
        h4 {
            margin-bottom: 20px;
        }
        
        input[type=text] {
            width: 300px;
            height: 30px;
            border: none;
            outline: none;
            border: 1px solid #ccc;
            margin-top: 20px;
            background: #FFFEE7;
        }
        
        input[type=button] {
            width: 200px;
            height: 35px;
            border: none;
            outline: none;
            border: 1px solid #ccc;
            margin-top: 30px;
            background-color: #FFFEE7;
            font-size: 14px;
        }
        
        span {
            font-size: 14px;
        }
        
        .X {
            position: absolute;
            right: 0px;
            top: 0px;
            color: #ccc;
            font-size: 18px;
            margin: 6px 10px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="mask"></div>
        <h3>点击登录</h3>
        <div class="main">
            <h4>登录会员</h4>
            <span>&emsp;用户名:&nbsp;</span>
            <input type="text" placeholder="请输入用户名">
            <br>
            <span>登录密码:&nbsp;</span>
            <input type="text" placeholder="请输入登录密码">
            <input type="button" value="登录会员">
            <div class="X">X</div>
        </div>

    </div>
    <script>
        var main = document.querySelector('.main'); //移动的盒子
        console.log(main);
        var clicks = document.querySelector('h3'); //点击登录
        console.log(clicks);
        var mask = document.querySelector('.mask'); //蒙版
        var vip = document.querySelector('input[type=button');
        var X = document.querySelector('.X')
        console.log(vip);
        console.log(mask);
        clicks.onclick = function() {
            mask.style.display = 'block';
            main.style.display = 'block';
        }
        vip.onclick = X.onclick = function() {
            mask.style.display = 'none';
            main.style.display = 'none';
        }
        main.onmousedown = function(e) {
            console.log(main.offsetLeft);
            console.log(e.clientY);
            // mainX,mainY鼠标距离盒子边缘的偏移量
            var mainX = e.clientX - main.offsetLeft;
            var mainY = e.clientY - main.offsetTop;
            console.log(mainX);
            console.log(mainY);
            document.onmousemove = function(e) {
                main.style.left = e.clientX - mainX + 'px';
                main.style.top = e.clientY - mainY + 'px';
                console.log(main.style.left);
                console.log(main.style.top);

            };
        };
        document.onmouseup = function() {
            document.onmousemove = 'none';
        };
    </script>
</body>

</html>

 

posted @ 2023-02-13 11:23  芬-mi  阅读(16)  评论(0)    收藏  举报