offset系列

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

注意

• 獲取元素距離帶有定位的父元素位置
• 獲取元素自身的大小（寬度高度）
• 返回的值不帶單位

offset系列常用屬性

• element.offsetParent：返回作為該元素帶有定位的父級元素，如果沒有父級則返回body
• element.offsetTop：返回元素相對帶有定位父元素上方上框的偏移
• element.offsetLeft：返回元素相對帶有定位父元素左方框的偏移
• element.offsetWidth：返回自身包括padding,邊框，內容區的寬度，返回值不帶單位
• element.offsetHight：返回自身包括padding,邊框，內容區的高度，返回值不帶單位

offset與style區別

offset

1. offset可以得到任意樣式中的樣式值
2. offse系列獲取的數值沒有單位
3. offsetWidth獲取的包含padding,border+width
4. offset是隻讀的

style

1. style只能得到行內樣式表中的樣式值
2. style.width獲取的帶有單位的字串
3. style.width獲取不包含padding和border的值
4. style.width是可讀寫屬性，可以獲取也可以賦值

client系列

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

• element.clientTop：返回元素上邊框的大小
• element.clientLeft：返回元素左邊框的大小
• element.clientWidth：返回包含padding，不包含border的高度，返回值不帶單位
• element.clientHeight：返回包含padding，不包含border的高度，返回值不帶單位

立即執行函式

(function() {})(引數);
(function() {} (引數));
// 兩種定義方式

建立一個獨立的作用域

scroll系列

onscroll事件，當滾動滾動條的時候會觸發的事件

頁面被捲去頭部，有相容問題，因此被捲去的頭部通常有如下寫法

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

• element.scrollTop：返回被捲去上側的距離，返回值不帶單位
• element.scrollLeft：返回被捲去左側的距離，返回值不帶單位

真正內容大小，如果超過則會超出，網頁的滾動條，事件源是document

• element.scrollWidth：返回自身實際高度，不包含邊框，返回值不帶單位
• element.scrollHeight：返回自身實際寬度，不包含邊框，返回值不帶單位

總結

1. offset系列常用與獲取元素的位置
2. client系列常用於獲取元素的大小
3. scroll系列常用於獲取滾動條距離
4. 頁面滾動通過window.pageXoffset獲取

動畫函式封裝

核心原理：利用定時器不斷移動盒子位置

不同的元素設定不同的定時器

注意：必須要加定位才可以

節流閥

防止輪播圖按鈕連續點選造成播放速度過快

節流閥的目的：當上一個函式動畫內執行完畢，在去執行下一個函式動畫，讓事件無法繼續連續觸發

核心思路：利用回撥函式，新增一個變數來控制，鎖住函式和解鎖函式