元素偏移量offset系列

元素偏移量offset系列

offset系列属性

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

        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移  位置 返回的不带单位的数值
        console.log(father.offsetTop); //150
        console.log(father.offsetLeft); //150
        // 它以带有定位的父亲为准，如果没有父亲或者父亲没有定位 则以 body为准
        console.log(son.offsetLeft); //45
        var w = document.querySelector('.w');
        // 2.可以得到元素的大小 宽度和高度 是包含padding + border + width
        console.log(w.offsetWidth); //927
        console.log(w.offsetHeight); //250
        // 3.返回带有定位的父亲 否则是body   两个返回父元素的区别：
        console.log(son.offserParent); //返回父亲（带定位）   如果父亲没有定位 则返回的是body
        console.log(son.parentNode); //返回父亲 是最近一级的父亲 亲爸爸 不管父亲有没有定位

offset与style的区别：

<div class="box" style="width: 200px;"></div>
    <script>
        // offset 与 style的区别
        var box = document.querySelector('.box');
        console.log(box.offsetWidth); //220
        console.log(box.style.width); //200
        // box.offsetWidth = '300px'; //盒子宽度未变
        box.style.width = '300px'; //盒子宽度变了
    </script>

案例：计算鼠标在盒子内的坐标

1. 我们在盒子内点击，想要得到鼠标距离盒子左右的距离。 首先得到鼠标在页面中的坐标 (e.pageX, e.pageY)
2. 其次得到盒子在页面中的距离(box.offsetLeft, box.offsetTop)
3. 用鼠标距离页面的坐标减去盒子在页面中的距离，得到 鼠标在盒子内的坐标

var box = document.querySelector('.box');
        box.addEventListener('mousemove', function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetLeft);
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;
        })

案例：拖动的模态框

1.获取元素后
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';
            }

(3) 鼠标弹起，就让鼠标移动时间移除

document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })

案例：京东放大镜效果

获取元素后：
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;
        // console.log(x, y);
        // (2)减去盒子高度 300 的一半 是150 就是我们 mask的最终 left 和 top值了
        // (3)我们 mask 移动的距离
        // 让鼠标在黄色盒子的中心 跟着一起移动
        var maskX = x - mask.offsetWidth / 2; //mask.offsetWidth是盒子的自身宽度
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在 0 的位置 （不让黄色盒子超出大盒子范围）
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) { //遮挡层左边最多不能超过0 否则x=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';

3.大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离

// 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离   (大图片-大盒子)
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X  Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px'; //负数 是因为 遮挡层向左 大图得向右移动 才能把左边展现出来
        bigIMg.style.top = -bigY + 'px';
    })
})