PC特效：offset和拖动模态框

最新推荐文章于 2024-06-02 21:27:33 发布

椰果uu

最新推荐文章于 2024-06-02 21:27:33 发布

阅读量25

点赞数 1

分类专栏： JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_73560798/article/details/134719216

版权

JavaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、offset

pageX: 页面X坐标位置
pageY: 页面Y坐标位置

offsetX：鼠标坐标到元素的左侧的距离
offsetY：鼠标坐标到元素的顶部的距离

offsetLeft：该元素外边框距离包含元素内边框左侧的距离
offsetTop：该元素外边框距离包含元素内边框顶部的距离

offsetWidth: width + padding-left + padding-right + border-left + border-right
offsetHeight: height + padding-top + padding-bottom + border-top + border-bottom

如果没有父亲或者父亲没有定位，则以body为准
注意获取的是不带单位的数值！！！！！

offset和style的区别：

二、拖动模态框

在网页中实现框框的拖拽效果

思路：

<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>拖动模态框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        a {
            text-decoration: none;
            color: black;
        }

        h1 {
            margin: 10px auto;
            text-align: center;
            font-size: 30px;
        }

        .login {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            z-index: 9999;
            transform: translate(-50%, -50%);
            background-color: #fff;
            width: 600px;
            height: 300px;
            box-shadow: 0px 0px 25px -16px;
        }

        .login_title {
            position: relative;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 20px;
        }

        .close_login {
            position: absolute;
            top: -25px;
            right: -25px;
            text-align: center;
            width: 50px;
            height: 50px;
            line-height: 50px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: -10px 10px 17px -15px;
            font-size: 16px;
        }

        .login_content {
            text-align: center;
            height: 100px;
        }

        .login_input {
            width: 100%;
            margin: 20px 0;
        }

        .login_input label {
            display: inline-block;
            width: 80px;
            text-align: right;
        }

        .login_input input {
            display: inline-block;
            outline: none;
            width: 400px;
            height: 40px;
            border: 1px solid #ccc;
        }

        .login_button {
            width: 300px;
            height: 50px;
            margin: 40px auto;
            text-align: center;
            line-height: 50px;
            border: 1px solid #ccc;
            font-size: 20px;
        }

        .blockall {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .3);
        }
    </style>
</head>

<body>
    <h1>点击此处弹出登录框</h1>
    <div class="login">
        <div class="login_title">登录会员
            <span class="close_login"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="login_content">
            <div class="login_input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名">
            </div class="login_input">
            <div class="login_input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码">
            </div>
        </div>
        <div class="login_button">
            <a href="javascript:;">点击登录</a>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="blockall"></div>

    <script>
        //点击按钮显示，点击关闭关闭
        var welcome = document.querySelector('h1');
        var login = document.querySelector('.login');
        var blockall = document.querySelector('.blockall');
        var close_login = document.querySelector('.close_login');

        welcome.addEventListener('click', function () {
            login.style.display = 'block';
            blockall.style.display = 'block';
        })

        close_login.addEventListener('click', function () {
            login.style.display = 'none';
            blockall.style.display = 'none';
        })

        //拖拽功能实现
        var login_title = document.querySelector('.login_title');
        //1.鼠标按下时获得鼠标在盒子内的坐标
        login_title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            //2.鼠标移动时，改变盒子定位的top和left，注意一定要加单位px
            login.addEventListener('mousemove', move)
            function move(e) {
                this.style.top = e.pageY - y + 'px';
                this.style.left = e.pageX - x + 'px';
            }
            //3.移动结束后，鼠标抬起，删除移动事件
            login.addEventListener('mouseup', function (e) {
                this.removeEventListener('mousemove', move);
            })
        })
    </script>

椰果uu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PC特效：offset和拖动模态框

pageX: 页面X坐标位置pageY: 页面Y坐标位置offsetX：鼠标坐标到元素的左侧的距离offsetY：鼠标坐标到元素的顶部的距离offsetLeft：该元素外边框距离包含元素内边框左侧的距离offsetTop：该元素外边框距离包含元素内边框顶部的距离如果没有父亲或者父亲没有定位，则以body为准注意获取的是不带单位的数值！！！！！
复制链接

扫一扫