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. [圖片放大預覽效果]