一休里、自定義動畫
animation: flash 0.5s alternate infinite
/*自定義動畫*/
@keyframes flash {
0%{opacity: 0;}
100%{opacity: 1;}
}
- 延遲執(zhí)行
start.style.animationDelay = delay + 's';
二徽缚、Underscore-min.js
Underscore封裝了常用的JavaScript對象操作方法，用于提高開發(fā)效率粱腻。我們可以將它單獨(dú)運(yùn)用到任何一個頁面商膊，另外宾濒，Underscore還可以被使用在Node.js運(yùn)行環(huán)境军援。
Underscore中有許多方法在JavaScript1.6中已經(jīng)被納入規(guī)范仅淑，因此在Underscore對象內(nèi)部，會優(yōu)先調(diào)用宿主環(huán)境提供的內(nèi)置方法（如果宿主環(huán)境已經(jīng)實(shí)現(xiàn)了這些方法）胸哥，以此提高函數(shù)的執(zhí)行效率涯竟。
Underscore默認(rèn)使用_（下劃線）來訪問和創(chuàng)建對象。
三空厌、offSet家族
- 3.1 offSet 自己的庐船，用于獲取元素尺寸
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
- 3.2 offsetWidth 和 offsetHeight
- 獲取對象自身的寬度和高度 ，包括內(nèi)容嘲更、邊框和內(nèi)邊距筐钟，即：
offsetWidth = width + border + padding
div{
width: 300px; border-right:2px solid #ccc; padding:10px;
}
問：div的offsetWidth是多少？
- 注意：和 div.style.width 的區(qū)別哮内，其只能獲取到行內(nèi)的數(shù)值
- 3.3 offsetLeft 和 offsetTop
- 距離第一個有定位的父級盒子左邊和上邊的距離盗棵，注意：父級盒子必須要有定位，如果沒有北发，則最終以body為準(zhǔn)纹因！
- 總結(jié)：offsetLeft和offsetTop從從父標(biāo)簽的padding開始計算，不包括border琳拨。即：從子盒子邊框到定位父盒子邊框的距離瞭恰。
- 3.4 offsetParent
返回當(dāng)前對象的父級（帶有定位）盒子，可能是父親狱庇、也可能是爺爺：
如果當(dāng)前元素的父級元素沒有進(jìn)行CSS定位（position：absolute 或 relative）惊畏，則其offsetParent為body； 如果當(dāng)前元素的父級元素中有CSS定位（position：absolute或relative）密任，offsetParent取最近的那個父級元素颜启。
注意：和parentNode的區(qū)別？(其只找親生父親)
3.5 offsetXXX 和 style.XXX的區(qū)別
用offsetLeft和style.left來分析浪讳，其他的以此類推：
a) style.left只能獲取行內(nèi)的缰盏，而offsetLeft則可以獲取到所有的；
b) offsetLeft 可以返回沒有定位盒子距離左側(cè)的位置淹遵；而style.left不可以口猜，其只能返回有定位盒子的left;
c) offsetLeft 返回的是數(shù)字，而 style.left 返回的是字符串透揣，除了數(shù)字外還帶有單位：px;
注意：可以用parseInt進(jìn)行轉(zhuǎn)化济炎；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
d) offsetLeft是只讀的，而style.left是可讀寫辐真；
e) 如果沒有給 當(dāng)前 元素指定過 top 樣式须尚，則 style.top 返回的是空字符串崖堤。
案例----彈性菜單效果.html
案例----如影隨形效果.html
四、JS的事件對象 - event
- 4.1 在之前我們已經(jīng)接觸過很多事件恨闪，比如：onclick倘感，ondbclick，onfocus, onmousedown咙咽，onmousemove...
btn.onclick = function(){
// 代碼塊
}
btn.onclick = function(event){ // event就是當(dāng)前事件的對象，簡稱事件對象
}
只要觸發(fā)DOM上的某個事件時淤年，會產(chǎn)生一個事件對象event钧敞，這個對象中包含著所有與事件有關(guān)的信息。所有瀏覽器都支持event對象麸粮，但支持的方式不同溉苛。比如：IE6-8只能通過window.event獲取事件對象，而其他的則可以直接獲取弄诲。通常愚战，考慮兼容性的寫法：
var event = event || window.event;
4.2 event 常見屬性
4.3 pageX/pageY、screenX/screenY齐遵、clientX/clientY的區(qū)別
screenX/screenY 是以屏幕為基準(zhǔn)進(jìn)行測量寂玲，即：當(dāng)前元素距離屏幕的尺寸
pageX 和 pageY 是以當(dāng)前文檔（絕對定位）為基準(zhǔn)，不適用于IE6-8;
clientX 和 clientY 是以當(dāng)前可視區(qū)域?yàn)榛鶞?zhǔn)梗摇，類似于固定定位拓哟。
4.4 JS常見事件
onmousemove 當(dāng)鼠標(biāo)在當(dāng)前元素中移動的時候觸發(fā)，鼠標(biāo)只要移動一像素就會執(zhí)行的事件伶授，頻率非常高断序；
onmouseover 當(dāng)鼠標(biāo)進(jìn)入當(dāng)前元素時觸發(fā)，只會被觸發(fā)一次
onmouseup 當(dāng)鼠標(biāo)彈起的時候觸發(fā)
onmousedown 當(dāng)鼠標(biāo)按下的時候觸發(fā)
4.5 防止拖動時選中內(nèi)容
防止拖拽的時候選中拖拽區(qū)域中的內(nèi)容糜烹，代碼如下：
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
案例----商品放大效果.html
案例----滾動條效果.html
五违诗、代碼的執(zhí)行-同步和異步
5.1 同步執(zhí)行
- 下一行代碼的執(zhí)行必須等待上一個行代碼執(zhí)行完畢再執(zhí)行；或者說上一行未執(zhí)行完畢下一行不能執(zhí)行疮蹦。
5.2 異步執(zhí)行
- 代碼各自執(zhí)行各自的诸迟，互相獨(dú)立。
5.3 初始化執(zhí)行
- 網(wǎng)頁一發(fā)布就執(zhí)行的代碼稱之為初始化中執(zhí)行挚币；初始化也是同步執(zhí)行的一種亮蒋。
5.4 總結(jié)
- 目前我們學(xué)習(xí)的代碼中有哪些是同步的哪些是異步的？主要關(guān)注異步就可以妆毕，所有被鼠標(biāo)觸發(fā)的事件都可以認(rèn)為是異步慎玖，互相獨(dú)立。還有一個需要注意的就是定時器中的代碼都是異步的笛粘，也是互相獨(dú)立趁怔。
