元素偏移量offset系列

1.1 offset概述

offset翻译过来，就是偏移量，我们使用offset系列相关属性，可以动态的得到该元素的位置（偏移）、大小等。

• 获取元素距离带有定位父元素的位置。
• 获得元素自身的大小（宽度高度）。
• 注意： 返回的数值都不带单位。

offset系列常用属性：

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

 

1.2 offset与style区别

offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWIdth包含padding+border+width	style.width获得不包含padding和border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值
所以，我们想要获取元素大小位置，用offset更合适	所以，我么想要给元素更改值，则需要用style改变

 

1.3 拖拽模态框

案例分析：

1.点击弹出层，模态框和遮罩层就会显示出来display:block;

2.点击关闭按钮，模态框和遮罩层就会隐藏起来display:none;

3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标；

4.触发事件是鼠标按下mousedown,鼠标移动mousemove，鼠标松开mouseup；

5.拖拽过程：鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态框就可以跟着鼠标走了；

6.鼠标按下触发的事件源是最上面一行，就是id为title

7.鼠标的坐标减去鼠标在盒子里的坐标，才是模态框真正的位置。

<div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
        <div id="login" class="login">
            <div id="title" class="login-title">登录会员
                <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
            </div>
            <div class="login-input-content">
                <div class="login-input">
                    <label>用户名：</label>
                    <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
                </div>
                <div class="login-input">
                    <label>登录密码：</label>
                    <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
                </div>
            </div>
            <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
        </div>
        <!-- 遮盖层 -->
        <div id="bg" class="login-bg"></div>
        
        <script>
            // 获取元素
            var login = document.querySelector('.login');
            var mask = document.querySelector('.login-bg');
            var link = document.querySelector('#link');
            var closeBtn = document.querySelector('#closeBtn');
            var title = document.querySelector('#title');
            // 2.点击弹出层这个链接link，让mask和login显示出来
            link.addEventListener('click', function(){
                mask.style.display = 'block';
                login.style.display = 'block';
            });
            // 3. 点击closeBtn就隐藏mask和login
            closeBtn.addEventListener('click', function() {
                mask.style.display = 'none';
                login.style.display = 'none';
            });
            // 4.开始拖拽
            // （1）当我们鼠标按下，就获得鼠标在盒子里的坐标
            title.addEventListener('mousedown', function(e){
                var x = e.pageX - login.offsetLeft;
                var y = e.pageY - login.offsetTop;
                // (2)鼠标移动的时候，把鼠标在页面的坐标，减去鼠标在盒子里的坐标，就是模态框的left和top
                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() {
                    document.removeEventListener('mousemove' , move)
                })
            })
        </script>

 京东放大镜效果：

window.addEventListener('load', function() {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1.当我们鼠标经过preview_img就显示和隐藏mask遮罩层和big大盒子
    preview_img.addEventListener('mouseover', function() {
        mask.style.display = 'block';
        big.style.display = 'block';
    });
    preview_img.addEventListener('mouseout', function() {
        mask.style.display = 'none';
        big.style.display = 'none';
    });
    // 2.鼠标移动的时候，让黄色盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function(e) {
        // (1).先计算出鼠标在盒子里的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // (2).减去盒子高度 300的一半 是150就是我们mask的最终 left和top值了
        // (3).我们mask移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4). 如果x坐标小于0， 就让他停在0的位置
        // 遮罩层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if(maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        var bigImg = document.querySelector('.bigImg');
        // 大图片的移动距离
        var bigMax = bigImg.offsetHeight - big.offsetWidth;
        // 大图片的移动距离
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigImg.style.left = -bigX + 'px';
        bigImg.style.top = -bigY + 'px';
    })
})