BOM（三）：offset和拖动模态框

最新推荐文章于 2024-10-08 14:23:59 发布

小粉粉hhh

最新推荐文章于 2024-10-08 14:23:59 发布

阅读量171

点赞数 9

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/hdhhdhbsjxbdhvyg/article/details/136614347

版权

一、offset

top、left：它以带有定位的父亲为准，否则以body为主

w、h：返回自己的高度和宽度

parent：返回自己的父亲

注意：element.parentNode也返回自己最近一级的父亲元素，是不管有没有定位的

案例：获取鼠标在盒子内的坐标

var div=document.querySelector('div');
        div.addEventListener('click',function(e){
            var x=e.pageX;
            var y=e.pageY;
            var xx=x-this.offsetLeft;
            var yy=y-this.offsetTop;
            console.log(xx);
            console.log(yy);
        })

案例：拖动模态框

<style>
    li{
    list-style: none;
}
a {
    color: black;
    text-decoration: none;
}
    *{
        margin: 0;
        padding: 0;
        background-color: rgb(196, 190, 190);
    }
    /* .bg{
        background-color: gray;
    } */
    .login-input-content{
        background-color: white;
        height: 230px;
        padding-top: 50px;
        width: 450px;
        padding-left: 10px;
        margin-left: 100px;
        margin-top: 100px;
        position: relative;
    }
    p{
        font-size: 20px;
        background-color: white;
        text-align: center;
        /* line-height: 30px; */
        margin-bottom: 20px;
    }
    .login-input label,input{
        background-color: white;

    }
    input{
        height: 30px;
        width: 300px;
        margin-bottom: 5px;
        border: 1px solid rgb(190, 187, 187);
    }
    .login-button{
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 18px;
        margin-top: 20px;
        margin-left: 130px;
        border: 1px solid rgb(206, 201, 201);
        background-color: white;
    }
    .login-button a{
        background-color: white;
    }
    .login-input{
  
        background-color: white;
    }
    .guanbi{
        position: absolute;
        top: -20px;
        right: -20px;
        background-color: white;
        border-radius: 90%;
        height: 50px;
        width: 50px;
        line-height: 50px;
        text-align: center;
        border: 1px solid rgb(223, 219, 219);
    }
    label{
        width: 40px;
        /* float: right; */
    }
    input{
        padding-left: 10px;
    }
</style>
<body>
    <div class="login-input-content">
        <div class="guanbi">关闭</div>
        <p>登陆会员</p>
        <div class="login-input">
            <label>&nbsp;用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="login-input">
        </div>
        <div class="login-input">
            <label>登录密码:</label>
            <input type="password" placeholder="请输入登录密码" name="info[password" id="password">
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:;">登陆</a></div>
        <div class="bg"></div>
    </div>

    <script>
        
      
    </script>
</body>

先来个css和html，做的比较简单，细节先不管了

看老师的视频发现代码还是写的比较乱，先由大了写，往里一层一层套

<script>
    var btn=document.querySelector('.tanchu');
    var guanbi=document.querySelector('.guanbi');
    var login=document.querySelector('.login-input-content');
    btn.addEventListener('mouseover',function(){
        login.style.display='block';
    })
    guanbi.addEventListener('click',function(){
        login.style.display='none';
    })
    var move=document.querySelector('.move');
    login.addEventListener('mousedown',function(e){
        var x=e.pageX-login.offsetLeft;
        var y=e.pageY-login.offsetRight;
        login.addEventListener('mousemove',move)
        function move(e){
            this.style.top=e.pageY - y + 'px';
            this.style.left = e.pageX - x + 'px';
            }

        login.addEventListener('mouseup', function (e) {
                this.removeEventListener('mousemove', move);
            })
        })