首页 > 其他分享> > 拖动登录模拟框

拖动登录模拟框

2022-03-19 15:34:11 作者：互联网

拖动登录模拟框

效果展示：
在这里插入图片描述代码实现

<!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>
        *{
            background-color:#ccc;
        }
        .dl{
            text-align: center;
            font-size: 25px;
        }
        .box{
            width: 300px;
            height: 200px;
            border:2px solid rgb(85, 9, 9);
            margin-top: 50px;
            text-align: center;
            margin-left: 50%;
            transform: translateX(-50%);
            border-radius: 5px;
            position: absolute;

            display: none;
        }
        .box h3{
            width: 100%;
        }
        p{
            text-align: center;
        }
        .container{
            margin-top: 30px;
        }
        .close{
            position: relative;
            top: -180px;
            left: 305px;
            width:30px;
            height: 30px;
            border: 1px solid rgb(85, 9, 9);
            border-radius: 100%;
            font-size: 10px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div class="dl">点击弹出登录框</div>

    <div class="box">
        <h3>登录会员</h3>
        <div class="container">
            用户姓名:<input type="text">
            <br>
            用户密码:<input type="text">
            <p>登录会员</p>
        </div>
        <div class="close">关掉</div>
    </div>
    <script>
        //获得元素源
        var dl = document.querySelector('.dl');
        var box = document.querySelector('.box');
        var h3 = document.querySelector('h3');
        var container = document.querySelector('.container');
        var close = document.querySelector('.close');

        //点击弹出登录框
        dl.addEventListener('click',function (e) {
            box.style.display = 'block';
            //点击关掉登录框
            close.addEventListener('click',function (params) {
                box.style.display = 'none';
            })
        });
        //鼠标点击title,按着移动登录框跟着移动
        box.addEventListener('mousedown',function (e) { //鼠标距离内框的距离
                var x = e.pageX - h3.offsetLeft;
                var y = e.pageY - h3.offsetTop;
                document.addEventListener('mousemove',fn);
                //给盒子重新赋值左边距和右边距
                function fn(e) {
                    box.style.left = e.pageX - x + 'px';
                    box.style.top = e.pageY - y + 'px';
                }
                //当鼠标不在按着,清除盒子跟随鼠标移动事件
                document.addEventListener('mouseup',function (params) {
                    document.removeEventListener('mousemove',fn);
                })
            })
    </script>
</body>
</html>

注意事项
1，关于鼠标的一些事件的复习：
mousedown: 鼠标按下保持触发；
mouseup: 鼠标按下松开触发；
mousemove: 鼠标光标移动促触发；

2，关于这些事件之间一些逻辑注意：
鼠标按下触发事件，鼠标在运送时，获取鼠标所在光标的位置，鼠标松开，清除的登录框随着光标移动事件。

document.removeEventListener('mousemove',fn);

3布局实现注意。

标签：box,鼠标,登录,拖动,h3,var,document,模拟
来源： https://blog.csdn.net/qq_45911604/article/details/123595431