offset

• 元素.offsetHeight獲取元素的客觀高度，返回值為數值沒有單位，它獲取到的包括:元素內容高度+上下padding+上下border
• 元素.offsetWidth獲取元素的客觀寬度，返回值為數值沒有單位，它獲取到的包括:元素內容寬度+左右padding+左右border
• offsetHeight|offsetWidth與style對象的區別
  • offset是只讀屬性，它可以獲取到元素在頁面中的寬高，但是不能設置
  • style.height或者style.width只能獲取到行內樣式，寫在其他地方的樣式不能獲取，返回值是帶單位的字符串。同時也可以設置值，設置在行內樣式中。
  • 因此，offset一般用來獲取元素的真實寬度和高度，而設置就用style對象
• 元素.offsetParent 找到距離自身最近且有定位的節點。如果上一級沒有定位，那么他會一直往上找，都找不到就返回body
• 元素.offsetLeft計算從自身border左側到offsetParent內邊距左側的距離，就是自身左邊框最外側offsetParent左內邊距最外側的距離，如果不好理解可用畫圖理解
• 元素.offsetTop計算從自身border上側到offsetParent內邊距上側的距離，就是自身上邊框最外側offsetParent上內邊距最外側的距離
  • 注意：計算時，元素自身不會計算margin，offsetParent不會計算border和margin，如果包含在內的沒有設置就忽略不算
• offsetLeft|offsetRight與style對象的區別
  • 前三點區別可以看上面，是一樣的
  • 因為style是直接獲取行內樣式的值，所以你寫多少邊偏移值獲取到的就是多少，但是如果沒有該元素沒有設置定位，它設置的邊偏移值實際上是無效的，style不管這個，直接返回設置的值。offset獲取的是頁面客觀值，因為設置無效，所以返回0
  • 獲取左邊偏移值或者上邊偏移值，style對象獲取時會把margin劃入元素，整體來計算。而offset永遠只會把內容內邊距邊框看作元素，整體來計算。
• 總結，光用文字描述很難說清楚，一定要去看教案里的圖示就很容易理解

幾個常用Math方法

• Math.ceil(數值) 向上取整，例如1.9返回2，1.1也返回2
• Math.floor(數值) 向下取整，例如1.9返回1，1.1也返回1
• Math.round(數值) 四舍五入，例如1.9返回2，1.1也返回1，1.5返回2
• Math.abs(數值) 取絕對值

js勻速動畫公式

• 原理公式：當前位置 = 當前位置 + 移動距離
• 在配合定時器實現動畫時，定時器執行間隔最好是15毫秒，能保證動畫幀率在60左右

完整輪播圖案例總結

• 總的來說，就是通過圖片對應索引來控制移動距離。
• 在輪播圖案例中，索引使用得非常頻繁，包括集合索引、自定義索引，用它們來乘以每張圖片的寬度，就能獲取需要移動的距離。
• 自定義索引是用來記錄左右按鈕焦點圖時當前的位置。集合索引用來實現點擊數字按鈕實現對應圖片的切換。然后再調用動畫效果函數就能實現大部分輪播圖功能。
• 另外還有一些小細節，這里就不作多說，這個案例非常重要，一定要多看幾遍理解。

scroll

• 元素.scrollWidth 獲取元素內部內容的寬度
• 元素.scrollHeight 獲取元素內部內容的高度
• 元素.scrollLeft 獲取拖動X軸滾動條時，內容被卷去的左側距離
• 元素.scrollTop 獲取拖動Y軸滾動條時，內容被卷去的頂側距離
• 獲取瀏覽器頁面被卷去距離兼容寫法
  • 縱坐標三種：window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
  • 橫坐標三種：window.pageXOffset || document.documentElement.scrollLeft||document.body.scrollLeft

固定導航案例總結

• 固定導航案例有兩個重點
  • 一是用到了window.onscroll窗體滾動事件
  • 二是用到了scrollTop，通過卷去頂側距離和實際模塊高度來比較，判斷什么時候設置導航欄的樣式
• 并且因為導航欄使用固定定位后，會出現不占位的情況，下方盒子會頂上來，所以在設置固定定位的同時，還要給下面的盒子設置padding或者margin來保證導航欄原位置的距離存在。

js緩動動畫公式

• step = (target - leader) / 10
• leader = leader + step
• 可以看到緩動動畫和勻速動畫，就是step的值有所出入。勻速動畫step是一個定值，而緩動動畫step是一個差值，剛開始很大，但隨著它們差距越來越小，step就越來越小

訪問屬性的兩種方式

• 對象.style.width使用點語法訪問屬性是最基本的方式
• 對象.style["width"] 使用中括號語法訪問屬性這種方式，更加靈活，但是注意內部傳入變量是不需要雙引號的，字符串才需要

獲取樣式的另一種方法

• 通過style對象只能獲取到行內樣式，那么寫在其他地方的樣式怎么獲取呢？
• 主流瀏覽器使用的是window.getComputedStyle(元素對象，偽數組).樣式名
• ie6-8使用的是元素對象.currentStyle.樣式名
• 這兩種方法獲取到就是實際在元素上生效的樣式，不分書寫位置

client

• 元素.clientWidth獲取元素內部的高度
• 元素.clientHeight獲取元素內部的寬度
• 它和scroll的區別，同樣它們獲取的都是盒子內部的高和寬(即不包括邊框)，但是scroll獲取的是內容，就是說內容如果超出了盒子，它依然會計算。但client就只單純獲取盒子內部的padding和設置的高度。
• 元素.clientTop獲取頂部邊框的高度，就是borderTop的粗細
• 元素.clientLeft獲取左邊邊框的寬度，就是borderLeftd粗細
• client的top和left屬性基本沒有用，只做了解

獲取頁面可視區寬高

• window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0獲取頁面可視區域的寬度
• window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0獲取頁面可視區域的高度
• 上面的寫法是兼容了所有瀏覽器的寫法，如果想要在頁面大小發生改變的時候，動態獲取新的可視區域寬高，需要使用window.onresize窗體大小發生改變事件來配合實現。

旋轉木馬案例總結

• 在選擇木馬的案例中，我們要從之前案例的固定思維中跳出來，是移動整個ul元素，來實現里面每個li的輪播顯示。但是在選擇木馬中，直接給li進行樣式賦值來移動位置。
• 實際上圖片的移動就是給定位了的圖片設置left和top值，這個概念一定要記住。所以這個案例中用到數組來里存放對象的形式，來保存每個li的樣式屬性鍵值對。通過操作每個對象的索引讓每個li的樣式變化，從而達到旋轉的效果。
• 最后再次用到了變量引入，來實現節流閥的功能。