元素偏移量 offset 系列

1. 元素偏移量 offset 系列

1.1 offset 概述

offset 翻譯過來就是偏移量， 咱們使用 offset系列相關屬性能夠動態的獲得該元素的位置（偏移）、大小等。

1. 得到元素距離帶有定位父元素的位置

2. 得到元素自身的大小（寬度高度）

3. 注意：返回的數值都不帶單位

offset 系列經常使用屬性：

 

 

1.2 offset 與 style 區別

offset

• offset 能夠獲得任意樣式表中的樣式值

• offset 系列得到的數值是沒有單位的

• offsetWidth 包含padding+border+width

• offsetWidth 等屬性是隻讀屬性，只能獲取不能賦值

• 因此，咱們想要獲取元素大小位置，用offset更合適

style

• style 只能獲得行內樣式表中的樣式值

• style.width 得到的是帶有單位的字符串

• style.width 得到不包含padding和border 的值

• style.width 是可讀寫屬性，能夠獲取也能夠賦值

• 因此，咱們想要給元素更改值，則須要用style改變

由於平時咱們都是給元素註冊觸摸事件，因此重點記住 targetTocuhes

1.3  案例：獲取鼠標在盒子內的座標

1. 咱們在盒子內點擊，想要獲得鼠標距離盒子左右的距離。

2. 首先獲得鼠標在頁面中的座標（e.pageX, e.pageY）

3. 其次獲得盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)

4. 用鼠標距離頁面的座標減去盒子在頁面中的距離，獲得 鼠標在盒子內的座標

5. 若是想要移動一下鼠標，就要獲取最新的座標，使用鼠標移動

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

1.4  案例：模態框拖拽

彈出框，咱們也稱爲模態框。

​ 1.點擊彈出層，會彈出模態框， 而且顯示灰色半透明的遮擋層。

​ 2.點擊關閉按鈕，能夠關閉模態框，而且同時關閉灰色半透明遮擋層。

​ 3.鼠標放到模態框最上面一行，能夠按住鼠標拖拽模態框在頁面中移動。

​ 4.鼠標鬆開，能夠中止拖動模態框移動

1.5. 案例分析:

1. 點擊彈出層， 模態框和遮擋層就會顯示出來 display:block;

2. 點擊關閉按鈕，模態框和遮擋層就會隱藏起來 display:none;

3. 在頁面中拖拽的原理：鼠標按下而且移動， 以後鬆開鼠標

4. 觸發事件是鼠標按下mousedown，鼠標移動mousemove 鼠標鬆開 mouseup

5. 拖拽過程:  鼠標移動過程當中，得到最新的值賦值給模態框的left和top值，這樣模態框能夠跟着鼠標走了

6. 鼠標按下觸發的事件源是最上面一行，就是  id 爲 title

7. 鼠標的座標減去 鼠標在盒子內的座標， 纔是模態框真正的位置。

8. 鼠標按下，咱們要獲得鼠標在盒子的座標。

9. 鼠標移動，就讓模態框的座標  設置爲  ：鼠標座標 減去盒子座標便可，注意移動事件寫到按下事件裏面。

10. 鼠標鬆開，就中止拖拽，就是可讓鼠標移動事件解除 

 // 1. 獲取元素
        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';
            }
            // (3) 鼠標彈起，就讓鼠標移動事件移除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })

1.6  案例：仿京東放大鏡

1. 整個案例能夠分爲三個功能模塊

2. 鼠標通過小圖片盒子， 黃色的遮擋層 和 大圖片盒子顯示，離開隱藏2個盒子功能

3. 黃色的遮擋層跟隨鼠標功能。

4. 移動黃色遮擋層，大圖片跟隨移動功能。

1.7. 案例分析:

1. 黃色的遮擋層跟隨鼠標功能。

2. 把鼠標座標給遮擋層不合適。由於遮擋層座標以父盒子爲準。

3. 首先是得到鼠標在盒子的座標。

4. 以後把數值給遮擋層作爲left 和top值。

5. 此時用到鼠標移動事件，可是仍是在小圖片盒子內移動。

6. 發現，遮擋層位置不對，須要再減去盒子自身高度和寬度的一半。

7. 遮擋層不能超出小圖片盒子範圍。

8. 若是小於零，就把座標設置爲0

9. 若是大於遮擋層最大的移動距離，就把座標設置爲最大的移動距離

10. 遮擋層的最大移動距離：小圖片盒子寬度 減去 遮擋層盒子寬度

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;
        // console.log(x, y);
        // (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';
        // 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';

    })

})