一,水平滾動條和垂直滾動條
1.1技術點
1)求滾動條的長度? ?2)拖動滾動條,求內容要走多少
~滾動條的長度取決于滾動內容(滾動內容越長,滾動條越短);
~內容滾動的距離和滾動條移動的距離成倍數關系.
1.2 換算公式
求滾動條的長度:
? ? ? 滾動條的長度/盒子的長度=盒子的長度/內容的長度
? ? ? 滾動條的長度=(盒子的長度/內容的長度)*盒子的長度(這里的"長度"是指高度或寬度)
拖動滾動條時,求內容移動的距離:
? ? ? 內容移動的距離/滾動條移動距離=(內容的長度-盒子的長度)/(盒子長度-滾動條長度)
? ? ? 內容移動距離=(內容的長度-盒子的長度)/(盒子長度-滾動條的長度)*滾動條移動的距離
二.內置對象Document
Document對象是window 對象的一部分,可通過 window.document 屬性對其進行訪問
Document對象使我們可以從腳本中對HTML頁面中的所有元素進行訪問:
1.document.head(獲取頭部)
2.document.body(獲取body)
3.document.title(獲取標題)
4.document.documentElement(獲取整個html)
5. document.compatMode :
BackCompat:標準兼容模式關閉
CSS1Compat:標準兼容模式開啟
BackCompatible 對應quirks mode(怪異模式),CSS1Compat 對應strict mode(嚴格模式)
[早期的瀏覽器Netscape 4和Explorer 4對css進行解析時，并未遵守W3C標準，這時的解析方式就被我們稱之為quirks mode(怪異模式)，但隨著W3C的標準越來越重要，眾多的瀏覽器開始依照W3C標準解析CSS，仿照W3C標準解析CSS的模式我們叫做strict mode(嚴格模式) 。]
6.document.body.clientWidth(瀏覽器寬度)
三.scroll家族
1.基本概念
? ? ? 網頁正文全文寬:document.body.scrollWidth;
網頁正文全文高:document.body.scrollHeight;
網頁被卷去的高:document.body.scrollTop;
網頁被卷去的左邊寬度:document.body.scrollLeft;
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;
四.JSON
JSON(javaScript Object Notation)是一種輕量級的數據交換格式.它基于ECMAScript的一個子集.相比于XML,json更易于閱讀和編寫,同時也易于機器解析和生成,目前數據傳遞基本上都是用json.
JSON有兩種結構:對象和數組,兩種結構相互組合從而形成各種復雜的數據結構.
json特點:
數據在鍵值對中
數據由逗號分隔
花括號保存對象
方括號保存數組
五.瀑布流
1.布局界面
fallwater();
functionfallwater() {
? ? ? ? ? for(var i=0;i<listi[i].length;i++){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}
}
2.判斷需要加載的臨界點
functionisload() {
? ? ? ? ? ?varisload=a<=b;
? ? ? ? ? returnisload;
? }
3.滾動加載:
window.onload= function() {
? ? ? ?window.onscroll= function() {
? ? ? ? ? ? ? ? ?if(isload()) {
? ? ? ? ? ? ? ? ? ?for循環{添加圖片}
? ? ? ? ? ? ? ?fallwater();//對新添加頁面進行布局
? ? ? ? ? ? ? ? }
? ? ? ? ?}
}
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2017.9.27
