模拟按下鼠标拖动弹出框 

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h2 {
            text-align: center;
        }
        
        #login {
            width: 500px;
            margin: 0 auto;
            position: fixed;
            display: none;
            /* top: 100px;
            left: 100px; */
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        table {
            width: 500px;
            height: 260px;
            background: white;
        }
        
        td,
        th {
            line-height: 35px;
            height: 40px;
        }
        
        input {
            width: 350px;
            height: 30px;
            border: lavender 1px solid;
            outline: none;
        }
        
        .fonts {
            text-align: right;
            font-size: 14px;
            width: 110px;
        }
        
        button {
            margin: 0 auto;
            background: white;
            border: lavender 1px solid;
            width: 270px;
            height: 38px;
            outline: none;
            cursor: pointer;
        }
        
        .box {
            font-size: 14px;
            line-height: 40px;
            text-align: center;
            width: 42px;
            height: 40px;
            border: lavender 1px solid;
            border-radius: 55%;
            background: white;
            position: absolute;
            top: -20px;
            right: -21px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <h2>点击，弹出登录框</h2>
    <div id="login">
        <div class="box">关闭</div>
        <table>
            <tr>
                <th colspan="2">登录会员</th>
            </tr>
            <tr>
                <td class="fonts">用户名：</td>
                <td><input type="text" id="uname" placeholder="请输入用户名"></td>
            </tr>
            <tr>
                <td class="fonts">登录密码：</td>
                <td><input type="password" id="pwd" placeholder="请输入登录密码"></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><button>登录会员</button></td>
            </tr>
        </table>
    </div>
    <script>
        var h2 = document.querySelector('h2');
        var box = document.querySelector('.box');
        var login = document.querySelector('#login');
        var th = document.querySelector('th');
        var x, y;
        // 弹出层开始
        h2.addEventListener('click', function() {
            login.style.display = 'block';
            document.body.style.backgroundColor = '#ccc';

        });
        box.onclick = function() {
                login.style.display = 'none';
                document.body.style.backgroundColor = '';
            }
            // 弹出层结束
        th.addEventListener('mousedown', function(e) {
            // 计算点击后鼠标位置 距离 盒子上、 左边框的距离
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            th.style.cursor = 'move';
            //在页面中的任何位置都可以移动鼠标，所以事件源是document
            document.addEventListener('mousemove', move)

            function move(e) {
                // 用鼠标在页面中点击的位置  减去 鼠标距离盒子左、上边框的距离 得到 盒子距离页面边框的距离
                var loginX = e.pageX - x;
                var loginY = e.pageY - y;
                // 限制遮盖层的移动范围
                loginX = loginX < 250 ? loginX = 250 : loginX;
                loginX = loginX > 1100 ? loginX = 1100 : loginX;
                loginY = loginY < 150 ? loginY = 150 : loginY;
                loginY = loginY > 500 ? loginY = 500 : loginY;
                login.style.left = loginX + 'px';
                login.style.top = loginY + 'px';
            }
            document.addEventListener('mouseup', function(e) {
                th.style.cursor = 'default';
                document.removeEventListener('mousemove', move); //删除移动的监听事件
            })
        })
    </script>
</body>

</html>

 

posted @ 2019-10-18 21:23  晴天宝宝i  阅读(190)  评论(0)    收藏  举报