Javascript-API-BOM、元素偏移量offset、可視區client、滾動scroll系列、模態框、放大鏡案例、

元素偏移量 offset 系列

offset 概述

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

獲得元素距離帶有定位父元素的位置

獲得元素自身的大小（寬度高度）

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

offset 與 style 區別
**offset

offset 可以得到任意樣式表中的樣式值

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

offsetWidth 包含padding+border+width

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

所以，我們想要獲取元素大小位置，用offset更合適

**style

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

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

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

style.width 是可讀寫屬性，可以獲取也可以賦值

所以，我們想要給元素更改值，則需要用style改變

因爲平時我們都是給元素註冊觸摸事件，所以重點記住 targetTocuhes

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

我們在盒子內點擊，想要得到鼠標距離盒子左右的距離。
首先得到鼠標在頁面中的座標（e.pageX, e.pageY）
其次得到盒子在頁面中的距離 ( box.offsetLeft, box.offsetTop)
用鼠標距離頁面的座標減去盒子在頁面中的距離，得到鼠標在盒子內的座標
如果想要移動一下鼠標，就要獲取最新的座標，使用鼠標移動

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.點擊彈出層，會彈出模態框，並且顯示灰色半透明的遮擋層。

2.點擊關閉按鈕，可以關閉模態框，並且同時關閉灰色半透明遮擋層。

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

4.鼠標鬆開，可以停止拖動模態框移動

分析:

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

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

在頁面中拖拽的原理：鼠標按下並且移動，之後鬆開鼠標

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

拖拽過程: 鼠標移動過程中，獲得最新的值賦值給模態框的left和top值，這樣模態框可以跟着鼠標走了

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

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

鼠標按下，我們要得到鼠標在盒子的座標。

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

鼠標鬆開，就停止拖拽，就是可以讓鼠標移動事件解除

 // 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);
            })
        })

案例：仿京東放大鏡

整個案例可以分爲三個功能模塊
鼠標經過小圖片盒子，黃色的遮擋層和大圖片盒子顯示，離開隱藏2個盒子功能
黃色的遮擋層跟隨鼠標功能。
移動黃色遮擋層，大圖片跟隨移動功能。

分析:

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

把鼠標座標給遮擋層不合適。因爲遮擋層座標以父盒子爲準。

首先是獲得鼠標在盒子的座標。

之後把數值給遮擋層做爲left 和top值。

此時用到鼠標移動事件，但是還是在小圖片盒子內移動。

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

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

如果小於零，就把座標設置爲0

如果大於遮擋層最大的移動距離，就把座標設置爲最大的移動距離

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


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';

    })

})

元素可視區 client 系列

client概述

client 翻譯過來就是客戶端，我們使用 client 系列的相關屬性來獲取元素可視區的相關信息。通過
client系列的相關屬性可以動態的得到該元素的邊框大小、元素大小等

元素滾動 scroll 系列

scroll 概述

scroll 翻譯過來就是滾動的，我們使用 scroll 系列的相關屬性可以動態的得到該元素的大小、滾動距離等。

頁面被捲去的頭部

如果瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條。當滾動條向下滾動時，頁面上面被隱藏掉的高度，我們就稱爲頁面被捲去的頭部。滾動條在滾動時會觸發 onscroll事件。

案例：仿淘寶固定右側側邊欄

原先側邊欄是絕對定位
當頁面滾動到一定位置，側邊欄改爲固定定位
頁面繼續滾動，會讓返回頂部顯示出來

分析:

需要用到頁面滾動事件 scroll 因爲是頁面滾動，所以事件源是document

滾動到某個位置，就是判斷頁面被捲去的上部值。

頁面被捲去的頭部：可以通過window.pageYOffset 獲得如果是被捲去的左側window.pageXOffset

注意，元素被捲去的頭部是element.scrollTop , 如果是頁面被捲去的頭部則是 window.pageYOffset

其實這個值可以通過盒子的 offsetTop可以得到，如果大於等於這個值，就可以讓盒子固定定位了

  //1. 獲取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被捲去頭部的大小 一定要寫到滾動的外面
        var bannerTop = banner.offsetTop
            // 當我們側邊欄固定定位之後應該變化的數值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 獲取main 主體元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 頁面滾動事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 頁面被捲去的頭部
            // console.log(window.pageYOffset);
            // 3 .當我們頁面被捲去的頭部大於等於了 172 此時 側邊欄就要改爲固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 當我們頁面滾動到main盒子，就顯示 goback模塊
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })

頁面被捲去的頭部兼容性解決方案

需要注意的是，頁面被捲去的頭部，有兼容性問題，因此被捲去的頭部通常有如下幾種寫法：

聲明瞭 DTD，使用 document.documentElement.scrollTop

未聲明 DTD，使用 document.body.scrollTop

新方法 window.pageYOffset和 window.pageXOffset，IE9 開始支持

function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的時候  getScroll().left

三大系列總結

他們主要用法：

1.offset系列經常用於獲得元素位置 offsetLeft offsetTop

2.client經常用於獲取元素大小 clientWidth clientHeight

3.scroll 經常用於獲取滾動距離 scrollTop scrollLeft

4.注意頁面滾動的距離通過 window.pageXOffset 獲得

mouseenter 和mouseover的區別

當鼠標移動到元素上時就會觸發mouseenter 事件類似 mouseover，
mouseover 鼠標經過自身盒子會觸發，經過子盒子還會觸發。
mouseenter 只會經過自身盒子觸發、之所以這樣，就是因爲mouseenter不會冒泡
跟mouseenter搭配鼠標離開 mouseleave 同樣不會冒泡
它們兩者之間的差別是一個會冒泡、一個不會冒泡。

Javascript-API-BOM、元素偏移量offset、可視區client、滾動scroll系列、模態框、放大鏡案例、

Wireshark 安裝+使用（一）

博客園商業化之路-衆包平臺：繼續召集早期合作開發者

Vue-基本使用、模板語法(插值表達式、指令、事件綁定、屬性綁定、樣式綁定、分支循環結構)

git與gitHub的使用

JS高級-類與對象

Javascript-API-DOM-操作元素對象的屬性、文本內容、子元素、樣式、事件

JS高級-函數定義與調用、函數內的this指向、改變this指向方法、閉包、遞歸、嚴格模式

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結