offset

• 元素.offsetHeight獲取元素的客觀高度，返回值為數(shù)值沒(méi)有單位披坏，它獲取到的包括:元素內(nèi)容高度+上下padding+上下border
• 元素.offsetWidth獲取元素的客觀寬度原献，返回值為數(shù)值沒(méi)有單位馏慨，它獲取到的包括:元素內(nèi)容寬度+左右padding+左右border
• offsetHeight|offsetWidth與style對(duì)象的區(qū)別
  • offset是只讀屬性，它可以獲取到元素在頁(yè)面中的寬高姑隅，但是不能設(shè)置
  • style.height或者style.width只能獲取到行內(nèi)樣式写隶，寫在其他地方的樣式不能獲取，返回值是帶單位的字符串讲仰。同時(shí)也可以設(shè)置值樟澜，設(shè)置在行內(nèi)樣式中。
  • 因此叮盘，offset一般用來(lái)獲取元素的真實(shí)寬度和高度，而設(shè)置就用style對(duì)象
• 元素.offsetParent 找到距離自身最近且有定位的節(jié)點(diǎn)霹俺。如果上一級(jí)沒(méi)有定位柔吼，那么他會(huì)一直往上找，都找不到就返回body
• 元素.offsetLeft計(jì)算從自身border左側(cè)到offsetParent內(nèi)邊距左側(cè)的距離丙唧，就是自身左邊框最外側(cè)offsetParent左內(nèi)邊距最外側(cè)的距離愈魏，如果不好理解可用畫圖理解
• 元素.offsetTop計(jì)算從自身border上側(cè)到offsetParent內(nèi)邊距上側(cè)的距離，就是自身上邊框最外側(cè)offsetParent上內(nèi)邊距最外側(cè)的距離
  • 注意：計(jì)算時(shí)想际，元素自身不會(huì)計(jì)算margin培漏，offsetParent不會(huì)計(jì)算border和margin，如果包含在內(nèi)的沒(méi)有設(shè)置就忽略不算
• offsetLeft|offsetRight與style對(duì)象的區(qū)別
  • 前三點(diǎn)區(qū)別可以看上面胡本，是一樣的
  • 因?yàn)閟tyle是直接獲取行內(nèi)樣式的值牌柄，所以你寫多少邊偏移值獲取到的就是多少，但是如果沒(méi)有該元素沒(méi)有設(shè)置定位侧甫，它設(shè)置的邊偏移值實(shí)際上是無(wú)效的珊佣，style不管這個(gè)蹋宦，直接返回設(shè)置的值。offset獲取的是頁(yè)面客觀值咒锻，因?yàn)樵O(shè)置無(wú)效冷冗，所以返回0
  • 獲取左邊偏移值或者上邊偏移值，style對(duì)象獲取時(shí)會(huì)把margin劃入元素惑艇，整體來(lái)計(jì)算蒿辙。而offset永遠(yuǎn)只會(huì)把內(nèi)容內(nèi)邊距邊框看作元素，整體來(lái)計(jì)算滨巴。
• 總結(jié)思灌，光用文字描述很難說(shuō)清楚，一定要去看教案里的圖示就很容易理解

幾個(gè)常用Math方法

• Math.ceil(數(shù)值) 向上取整兢卵，例如1.9返回2习瑰，1.1也返回2
• Math.floor(數(shù)值) 向下取整，例如1.9返回1秽荤，1.1也返回1
• Math.round(數(shù)值) 四舍五入甜奄，例如1.9返回2，1.1也返回1窃款，1.5返回2
• Math.abs(數(shù)值) 取絕對(duì)值

js勻速動(dòng)畫公式

• 原理公式：當(dāng)前位置 = 當(dāng)前位置 + 移動(dòng)距離
• 在配合定時(shí)器實(shí)現(xiàn)動(dòng)畫時(shí)课兄，定時(shí)器執(zhí)行間隔最好是15毫秒，能保證動(dòng)畫幀率在60左右

完整輪播圖案例總結(jié)

• 總的來(lái)說(shuō)晨继，就是通過(guò)圖片對(duì)應(yīng)索引來(lái)控制移動(dòng)距離烟阐。
• 在輪播圖案例中，索引使用得非常頻繁紊扬，包括集合索引蜒茄、自定義索引，用它們來(lái)乘以每張圖片的寬度餐屎，就能獲取需要移動(dòng)的距離檀葛。
• 自定義索引是用來(lái)記錄左右按鈕焦點(diǎn)圖時(shí)當(dāng)前的位置。集合索引用來(lái)實(shí)現(xiàn)點(diǎn)擊數(shù)字按鈕實(shí)現(xiàn)對(duì)應(yīng)圖片的切換腹缩。然后再調(diào)用動(dòng)畫效果函數(shù)就能實(shí)現(xiàn)大部分輪播圖功能屿聋。
• 另外還有一些小細(xì)節(jié)，這里就不作多說(shuō)藏鹊，這個(gè)案例非常重要润讥，一定要多看幾遍理解。

scroll

• 元素.scrollWidth 獲取元素內(nèi)部?jī)?nèi)容的寬度
• 元素.scrollHeight 獲取元素內(nèi)部?jī)?nèi)容的高度
• 元素.scrollLeft 獲取拖動(dòng)X軸滾動(dòng)條時(shí)盘寡，內(nèi)容被卷去的左側(cè)距離
• 元素.scrollTop 獲取拖動(dòng)Y軸滾動(dòng)條時(shí)楚殿，內(nèi)容被卷去的頂側(cè)距離
• 獲取瀏覽器頁(yè)面被卷去距離兼容寫法
  • 縱坐標(biāo)三種：window.pageYOffset || document.documentElement.scrollTop||document.body.scrollTop
  • 橫坐標(biāo)三種：window.pageXOffset || document.documentElement.scrollLeft||document.body.scrollLeft

固定導(dǎo)航案例總結(jié)

• 固定導(dǎo)航案例有兩個(gè)重點(diǎn)
  • 一是用到了window.onscroll窗體滾動(dòng)事件
  • 二是用到了scrollTop，通過(guò)卷去頂側(cè)距離和實(shí)際模塊高度來(lái)比較宴抚，判斷什么時(shí)候設(shè)置導(dǎo)航欄的樣式
• 并且因?yàn)閷?dǎo)航欄使用固定定位后勒魔，會(huì)出現(xiàn)不占位的情況甫煞，下方盒子會(huì)頂上來(lái)，所以在設(shè)置固定定位的同時(shí)冠绢，還要給下面的盒子設(shè)置padding或者margin來(lái)保證導(dǎo)航欄原位置的距離存在抚吠。

js緩動(dòng)動(dòng)畫公式

• step = (target - leader) / 10
• leader = leader + step
• 可以看到緩動(dòng)動(dòng)畫和勻速動(dòng)畫，就是step的值有所出入弟胀。勻速動(dòng)畫step是一個(gè)定值楷力，而緩動(dòng)動(dòng)畫step是一個(gè)差值，剛開(kāi)始很大孵户，但隨著它們差距越來(lái)越小萧朝，step就越來(lái)越小

訪問(wèn)屬性的兩種方式

• 對(duì)象.style.width使用點(diǎn)語(yǔ)法訪問(wèn)屬性是最基本的方式
• 對(duì)象.style["width"] 使用中括號(hào)語(yǔ)法訪問(wèn)屬性這種方式，更加靈活夏哭，但是注意內(nèi)部傳入變量是不需要雙引號(hào)的检柬，字符串才需要

獲取樣式的另一種方法

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

client

• 元素.clientWidth獲取元素內(nèi)部的高度
• 元素.clientHeight獲取元素內(nèi)部的寬度
• 它和scroll的區(qū)別进胯，同樣它們獲取的都是盒子內(nèi)部的高和寬(即不包括邊框)用爪，但是scroll獲取的是內(nèi)容，就是說(shuō)內(nèi)容如果超出了盒子胁镐，它依然會(huì)計(jì)算偎血。但client就只單純獲取盒子內(nèi)部的padding和設(shè)置的高度。
• 元素.clientTop獲取頂部邊框的高度盯漂，就是borderTop的粗細(xì)
• 元素.clientLeft獲取左邊邊框的寬度颇玷，就是borderLeftd粗細(xì)
• client的top和left屬性基本沒(méi)有用，只做了解

獲取頁(yè)面可視區(qū)寬高

• window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0獲取頁(yè)面可視區(qū)域的寬度
• window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0獲取頁(yè)面可視區(qū)域的高度
• 上面的寫法是兼容了所有瀏覽器的寫法就缆，如果想要在頁(yè)面大小發(fā)生改變的時(shí)候亚隙，動(dòng)態(tài)獲取新的可視區(qū)域?qū)捀撸枰褂?code>window.onresize窗體大小發(fā)生改變事件來(lái)配合實(shí)現(xiàn)违崇。

旋轉(zhuǎn)木馬案例總結(jié)

• 在選擇木馬的案例中，我們要從之前案例的固定思維中跳出來(lái)诊霹，是移動(dòng)整個(gè)ul元素羞延，來(lái)實(shí)現(xiàn)里面每個(gè)li的輪播顯示。但是在選擇木馬中脾还，直接給li進(jìn)行樣式賦值來(lái)移動(dòng)位置伴箩。
• 實(shí)際上圖片的移動(dòng)就是給定位了的圖片設(shè)置left和top值，這個(gè)概念一定要記住鄙漏。所以這個(gè)案例中用到數(shù)組來(lái)里存放對(duì)象的形式嗤谚，來(lái)保存每個(gè)li的樣式屬性鍵值對(duì)棺蛛。通過(guò)操作每個(gè)對(duì)象的索引讓每個(gè)li的樣式變化，從而達(dá)到旋轉(zhuǎn)的效果巩步。
• 最后再次用到了變量引入旁赊，來(lái)實(shí)現(xiàn)節(jié)流閥的功能。