1. 首页
  2. WEB
  3. JavaScript

JavaScript之offset以及模态框拖拽的实现

JavaScript之offset以及模态框拖拽的实现

一、offset概述

offset翻译过来就是偏移量,使用offset的相关属性可以动态的获取元素的偏移、大小等

  • 获得元素距离带有定位父元素的位置
  • 获得该元素自身的大小(高宽)
  • 注意:返回的数值都不带单位

offset系列常用属性:

offset系列属性 作用
element.offsetParent 返回该元素带有定位的父级元素,如果父级都没有定位则返回body
element.offsetTop 返回元素相对带有定位父元素上方的偏移
element.offsetLeft 返回元素相对带有定位父元素上方的偏移
element.offsetWidth 返回自身包括padding、border、内容区的宽度
element.offsetHeight 返回自身包括padding、border、内容区的高度

顺便提一下client

client系列常用属性:

client系列属性 作用
element.clientTop 返回元素的上边框的大小
element.clientLeft 返回元素的左边框的大小
element.clientWidth 返回自身包括padding、内容区的宽度,不包含border
element.clientHeight 返回自身包括padding、内容区的高度,不包含border

二、offset和style的区别

offset style
可以等到任意样式表中的样式值 只能得到行内样式表的样式值
得到的值没有单位 得到的值都有单位
得到的值是包括padding+border+width 得到的值不包含padding和border的值
是只读属性,只能获得值,不能赋予值 是可读写属性,可以获取值,也能赋予值
更合适用来获取元素值 更适合用来给元素赋值

三、案列—模态拖拽框

下面介绍一个简单案列的实现,如下图:

JavaScript

代码如下

html:

<h1>点击,弹出登陆框</h1>
<div class="login">
    <h3>登录会员</h3>
    <form action="">
        <label for="">用户名: </label><input type="text" placeholder="请输入用户名"><br>
        <label for="">登录密码:</label><input type="password" placeholder="请输入登陆密码">
        <button>关闭</button>
    </form>
</div>

css:

body {
            position: relative;
            background: #ccc
        }
        h1{
            margin:5px auto;
            width: 300px;
            font-weight: normal;
            z-index: 0
        }
        h3 {
            cursor: move;
        }
        .login {
            width: 500px;
            height: 200px;
            background: #fff;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,50%);
            display: none;//开始是隐藏的
        }
        .login input {
            width: 200px;
            line-height: 20px;
            padding-left: 5px;
            margin-bottom: 10px;
            outline: none;
        }
        .login input[type=text]{
            margin-right: -14px
        }
        button {
            width: 40px;
            height: 40px;
            position: absolute;
            background: #fff;
            border-radius: 50%;
            border: none;
            top: -20px;
            right: -20px;
            outline: none;
            cursor: pointer;
        }

js:

var alert = document.querySelector('h1');
        //获取元素
        var login = document.querySelector('.login');
        var btn = document.querySelector('button');
        var mdown =document.querySelector('h3');
        alert.addEventListener('click', function(){
            login.style.display = 'block';
        });
        btn.addEventListener('click',function(){
            login.display.block = 'none';
        });

        mdown.addEventListener('mousedown', function(e){
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove',move);
            function move(e){
                var px = e.pageX - x;
                var py = e.pageY - y;
                login.style.left = px  + 'px';
                login.style.top = py +'px';
            }
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            });
        });

案列分析:

1.点击弹出层,会弹出模态框

2.点击关闭按钮,可以关闭模态框

3.鼠标放在最上面一行可以按住鼠标拖拽模态框在页面移动

4.鼠标松开,可以停止拖动模态框移动

实现分析:

1.点击弹出层后模态框会显示出来display:block;

 alert.addEventListener('click', function(){
            login.style.display = 'block';
        });//给弹出层添加点击监听器,点击之后使模态框的display:none转变为display:block;

2.点击关闭按钮之后,可以关闭模态框display:none;

 btn.addEventListener('click',function(){
             login.display.block = 'none';
        });//给关闭按钮添加点击监听器,点击之后使模态框的display:block转变为display:none;

3.在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标,拖拽框停止移动

4.鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup

5.鼠标按下过程:就是按住最上面哪一行h3标签,然后给他添加mousedown监听器事件

mdown.addEventListener('mousedown', function(e){//给拖拽行添加监听器
            var x = e.pageX - login.offsetLeft;//鼠标到拖拽框的左端距离
            var y = e.pageY - login.offsetTop;//鼠标到拖拽框上端距离
            document.addEventListener('mousemove',move);//当按住鼠标之后就进行移动
            function move(e){
                var px = e.pageX - x;//拖拽框到浏览器左边的距离
                var py = e.pageY - y;//拖拽框到浏览器上面的而距离
                login.style.left = px  + 'px';//拖拽框到浏览器左边的距离赋值给login的left值
                login.style.top = py +'px';//将拖拽框到浏览器上面的距离赋值给login的login值
            }
            document.addEventListener('mouseup',function(){//松开鼠标之后,移出move事件
                document.removeEventListener('mousemove',move);
            });
        });

5.鼠标移动过程:在按住的监听器下再添加一个移动的监听器事件,并动态的获取拖拽框的左端和上端距离浏览器的距离,在赋值给login的left和top;实现拖拽移动的效果

6.鼠标松开过程:添加鼠标松开事件,松开事件的时候,添加移除move事件,这时就可以实现模态框拖拽了。

总结:这个案列主要用到以下几个知识点:

原创文章,作者:Jack Jin,如若转载,请注明出处:https://www.jinxiaoliang.cn/434.html

发表评论

电子邮件地址不会被公开。

QR code