JavaScript 常見PC端網頁特效

1. 元素偏移量 offset

1.1 offset 概述

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

1. 得到元素距離帶有定位父元素的位置
2. 得到元素自身的大小（寬度高度）
3. 返回的數值都不帶單位

1.2 offset 系列經常使用屬性

1.3 offset 與 style 區別

2. 元素可視區 client

2.1 client 概述

client翻譯過來就是客戶端，咱們使用client系列的相關屬性來獲取元素可視區的相關信息

經過client系列的相關屬性能夠動態獲得該元素的邊框大小、元素大小等

2.2 client 系列經常使用屬性

3. 元素滾動 scroll

3.1 scroll 概述

scroll翻譯過來就是滾動，使用scroll系列的相關屬性能夠動態獲得該元素的大小、滾動距離等

3.2 scroll 系列屬性

3.3 頁面被捲去的頭部

若是瀏覽器的高（或寬）度不足以顯示整個頁面時，會自動出現滾動條

當滾動條向下滾動時，頁面上面被隱藏掉的高度，咱們就稱爲頁面被捲去的頭部

滾動條在滾動時會觸發onscroll事件

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

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

4. 三大系列總結

主要用法：

1. offset系列 常常用於得到元素位置offsetLeft、offsetTop
2. client常常用於獲取元素大小clientWidth、clientHeight
3. scroll常常用於獲取滾動距離scrollTop、scrollLeft
4. 注意頁面滾動的距離經過window.pageXOffset得到

[mouseenter 和 mouseover 的區別]

5. 動畫函數封裝

[緩動動畫函數封裝]

6. 常見網頁特效案例

1. [圖片跟隨鼠標]
2. [網頁輪播圖]
3. [返回頂部]
4. [拖動對話框效果]
5. [圖片放大預覽效果]