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