本文是針對剛學編程的小白,都是一些基礎知識,如果想了解更多深層一點的東西,歡迎移步本人博客!!
博客地址 點擊跳轉
----------------- offset ---------------------
自定義動畫
animation: flash 0.5s alternate infinite
/*自定義動畫*/
@keyframes flash {
0%{opacity: 0;}
100%{opacity: 1;}
}
- 延遲執行動畫
start.style.animationDelay = delay + 's';
Underscore-min.js
Underscore封裝了常用的JavaScript對象操作方法，用于提高開發效率。我們可以將它單獨運用到任何一個頁面，另外，Underscore還可以被使用在Node.js運行環境。
Underscore中有許多方法在JavaScript1.6中已經被納入規范，因此在Underscore對象內部，會優先調用宿主環境提供的內置方法（如果宿主環境已經實現了這些方法），以此提高函數的執行效率。
Underscore默認使用_（下劃線）來訪問和創建對象。
offset家族特點
- 只能取值，不能設置值
- 獲取的結果是數值，不是字符
- 獲取的時候不需要style
網頁可見區域寬： document.body.clientWidth;
網頁可見區域高： document.body.clientHeight;
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);
網頁可見區域高： document.body.offsetHeight (包括邊線的寬);
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
offsetWidth和offsetHeight
- offsetWidth / offsetHeight
- 得到對象的寬度和高度(自己的 , 與他人無關),包括內容,邊框,和內邊距
//offsetWidth = width + border + padding
div{ width:220px; border-left:2px solid red; padding:10px;}
div.offsetWidth = 220 + 2 + 10
- 注意:和 div.style.width 的區別，其只能獲取到行內的數值
offsetLeft和offsetTop
- 返回距離上級盒子(帶有定位)左邊的位置 只有左上
- 如果父輩元素都沒有定位 則以body為準
- offsetLeft 從父親的padding開始算 父親的border不算.即：從子盒子邊框到定位父盒子邊框的距離。
圖解
- 如果父輩元素有定位 則以定位的父輩元素為準
offsetParent
- 返回當前對象的父級（帶有定位）盒子，可能是父親、也可能是爺爺：
- 如果當前元素的父級元素沒有進行CSS定位（position：absolute 或 relative），則其offsetParent為body； 如果當前元素的父級元素中有CSS定位（position：absolute或relative），offsetParent取最近的那個父級元素。
- 注意：和parentNode的區別？
- parentNode指的是父節點，element.parentNode,獲取某一個元素的父節點，這里的父節點呢，只有一個，就是指的是最臨近的直接父節點.
-
offsetParent 這里的父節點，指的是相對于父節點，也就是說某個元素相對于誰定位，誰就是他的父親。
和它很相似的屬性還有offsetLeft \ offsetTop ，他們指的是前元素到offsetParent的距離。
offsetXXX 和 style.XXX的區別
- 用offsetLeft和style.left來分析，其他的以此類推：
a) style.left只能獲取行內的，而offsetLeft則可以獲取到所有的； b) offsetLeft 可以返回沒有定位盒子距離左側的位置；而style.left不可以，其只能返回有定位盒子的left; c) offsetLeft 返回的是數字，而 style.left 返回的是字符串，除了數字外還帶有單位：px; 注意：可以用parseInt進行轉化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300 d) offsetLeft是只讀的，而style.left是可讀寫； e) 如果沒有給 當前 元素指定過 top 樣式，則 style.top 返回的是空字符串。
附小Demo兩個 幫助更好的理解
----------------- scroll ---------------------
核心技術點
- 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家族
網頁正文全文寬： document.body.scrollWidth;
網頁正文全文高： document.body.scrollHeight;
網頁被卷去的高： document.body.scrollTop;
網頁被卷去的左： document.body.scrollLeft;
在實際開發中使用比較多的就是scrollTop，如下圖：
處理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;
scrollTo(x,y)
- 把內容滾動到指定的坐標
-
格式：scrollTo(xpos,ypos)
- xpos 必需；要在窗口文檔顯示區左上角顯示的文檔的 x 坐標；
- ypos 必需；要在窗口文檔顯示區左上角顯示的文檔的 y 坐標 。
- 網頁大部分都沒有水平滾動條，所以，這個x 不太常用
滾動事件
-
滾動的觸發對象：是window
-
滾動事件：onscroll
-
滾動的距離的獲取
// 為了兼容，我們一般采取或運算符
document.body.scrollTop || document.documentElement.scrollTop
-
定位跟隨：我們可以通過獲取offsetTop值和滾動的距離進行比較，如果當滾動的距離大于我們的offset值，我們就直接設置位置為固定位置，然后直接設置top = 0;如果要是小于的話，我們恢復原來的位置
注意點：不要在滾動監聽的過程中獲取offset值,因為在過程中獲取的話,offset值會有所變動
兼容
<script>
window.onscroll = function(){
var top = document.body.scrollTop || document.documentElement.scrollTop;
console.log(top);
}
</script>
實現瀑布流滾動
--------------------------- 區別 ----------------------
三大家族的區別
<script>
window.onload = function(){
var box = document.getElementById('box');
// width 和 height
// 自身內容的寬度/高度 + 內邊距 + 邊框
console.log('offset' + box.offsetWidth, box.offsetHeight);
// 自身內容的寬度/高度 + 內邊距
console.log('client' + box.clientWidth, box.clientHeight);
// 滾動內容撐起來的寬度 和 高度
console.log('scroll' + box.scrollWidth, box.scrollHeight);
// left 和 top
// 距離第一個有定位的父盒子左邊和上邊的距離
console.log('offset' + box.offsetLeft, box.offsetTop);
// 左邊框 和 上邊框
console.log('client' + box.clientLeft, box.clientTop);
// 水平和垂直滾動的距離
console.log('scroll' + box.scrollLeft, box.scrollTop);
}
</script>
offset、client和scroll的區別分析
-
left和top分析：
clientLeft: 左邊邊框的寬度；clientTop: 上邊邊框的寬度
offsetLeft: 當前元素距離有定位的父盒子左邊的距離；offsetTop: 當前元素距離有定位的父盒子上邊的距離
scrollLeft: 左邊滾動的長度; scrollTop: 上邊滾動的長度;
-
width和height分析
clientWidth/Height: 內容 + 內邊距
offsetWidth/Height: 內容 + 內邊距 + 邊框
scrollWidth/Height: 滾動內容的寬度和高度
圖解
clientWidth / scrollWidth / offsetWidth區別
- clientWidth:是對象看到的寬度（不含邊線,即border）
- scrollWidth:是對象實際內容的寬度（若無padding，那就是邊框之間距離，如有padding，就是左padding和右padding之間距離）
- offsetWidth:是指對象自身的寬度，整型，單位像素（含邊線，如滾動條的占用的寬，值會隨著內容的輸入而不斷改變）
- scrollHeight: 獲取對象的滾動高度。
- scrollLeft:設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離
- scrollTop:設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離scrollWidth:獲取對象的滾動寬度
- offsetHeight:獲取對象相對于版面或由父坐標offsetParent 屬性指定的父坐標的高度
- offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標的計算左側位置
- offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
易混淆點：
**clientX 設置或獲取鼠標指針位置相對于當前窗口的 x 坐標，其中客戶區域不包括窗口自身的控件和滾動條。 **
**clientY 設置或獲取鼠標指針位置相對于當前窗口的 y 坐標，其中客戶區域不包括窗口自身的控件和滾動條。 **
**offsetX 設置或獲取鼠標指針位置相對于觸發事件的對象的 x 坐標。 **
**offsetY 設置或獲取鼠標指針位置相對于觸發事件的對象的 y 坐標。 **
**screenX 設置或獲取獲取鼠標指針位置相對于用戶屏幕的 x 坐標。 **
screenY 設置或獲取鼠標指針位置相對于用戶屏幕的 y 坐標。
x 設置或獲取鼠標指針位置相對于父文檔的 x 像素坐標(亦即相對于當前窗口)。 y 設置或獲取鼠標指針位置相對于父文檔的 y 像素坐標(亦即相對于當前窗口)。document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
