模拟按下鼠标拖动弹出框

时间：2019-10-18 22:11:51 阅读：82 评论：0 收藏：0 [点我收藏+]

标签：dev click char ack class orm fixed lin div

<!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) {
                // 用鼠标在页面中点击的位置  减去 鼠标距离盒子左、上边框的距离 得到 盒子距离页面边框的距离
                login.style.left = e.pageX - x + ‘px‘;
                login.style.top = e.pageY - y + ‘px‘;
            }
            document.addEventListener(‘mouseup‘, function(e) {
                th.style.cursor = ‘default‘;
                document.removeEventListener(‘mousemove‘, move); //删除移动的监听事件
            })
        })
    </script>
</body>

</html>

模拟按下鼠标拖动弹出框

标签：dev click char ack class orm fixed lin div

原文地址：https://www.cnblogs.com/qtbb/p/11700839.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行