js特效 - Day2
一、水平滾動條 和 垂直滾動條
1.1 核心技術點
1）求滾動條的長度？ 2）拖動滾動條，求內容要走多少？
滾動條的長度取決于滾動內容（滾動內容越長，滾動條越短）；
內容滾動的距離和滾動條走的距離是成倍數關系。
1.2 換算公式
獲取滾動條的長度：
滾動條的長度 / 盒子的長度 = 盒子的長度 / 內容的長度
滾動條長度 = ( 盒子的寬度 / 內容的寬度) * 盒子的寬度
拖動滾動條，求內容走的長度：
內容走的距離 / 滾動條走的距離 =（內容的長度 - 盒子的長度） / (盒子長度 - 滾動條的長度)
內容走的距離 = （內容的長度 - 盒子的長度） / (盒子長度 - 滾動條的長度) * 滾動條走的距離
二、內置對象document
Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問
Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問:
document.head（獲取頭部）
document.body（獲取身體）
document.title （獲取標題）
document.documentElement（獲取整個html)
Document.compatMode:
-
BackCompat：標準兼容模式關閉
- 瀏覽器寬度:document.body.clientWidth
CSS1Compat：標準兼容模式開啟
瀏覽器寬度:document.documentElement.clientWidth
BackCompat 對應 quirks mode(怪異模式) , CSS1Compat 對應 strict mode (嚴格模式) ：早期的瀏覽器Netscape 4和Explorer 4對css進行解析時，并未遵守W3C標準，這時的解析方式就被我們稱之為quirks mode(怪異模式)，但隨著W3C的標準越來越重要，眾多的瀏覽器開始依照W3C標準解析CSS，仿照W3C標準解析CSS的模式我們叫做strict mode(嚴格模式) 。
三、scroll家族
- 3.1 基本概念
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
3.2 處理scroll家族瀏覽器適配問題
-
ie9+ 和 最新瀏覽器
window.pageXOffset; （scrollLeft）
window.pageYOffset; （scrollTop）
Firefox瀏覽器 和 其他瀏覽器
document.documentElement.scrollTop;
Chrome瀏覽器 和 沒有聲明 DTD <DOCTYPE >
document.body.scrollTop;
兼容寫法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3.3 scrollTo(x,y)
把內容滾動到指定的坐標
格式：scrollTo(xpos,ypos)
xpos 必需；要在窗口文檔顯示區左上角顯示的文檔的 x 坐標；
ypos 必需；要在窗口文檔顯示區左上角顯示的文檔的 y 坐標 。
網頁大部分都沒有水平滾動條，所以，這個x 不太常用。
四、什么是Json?
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它基于ECMAScript的一個子集。相比于XML，json易于人閱讀和編寫，同時也易于機器解析和生成，目前數據傳遞基本上都使用json。
JSON有兩種結構：對象 和 數組，兩種結構相互組合從而形成各種復雜的數據結構。
數據在鍵值對中
數據由逗號分隔
花括號保存對象
方括號保存數組
{
id: '110000',
text: '廊坊分行',
children: \[
{
id: '113000',
text: '廊坊銀行開發區支行',
leaf: true
},
{
id: '112000',
text: '廊坊銀行解放道支行',
children: \[
{
id: '112200',
text: '廊坊銀行三大街支行',
leaf: true
},
{
id: '112100',
text: '廊坊銀行廣陽道支行',
leaf: true
}
\]
},
{
id: '111000',
text: '廊坊銀行金光道支行',
leaf: true
}
\]
}
] }
五、實現瀑布流滾動
