每天一句：前進(jìn)緩慢沒(méi)關(guān)系，只要你別停下腳步。
一、運(yùn)動(dòng)框架
運(yùn)動(dòng)基礎(chǔ)
- 在開(kāi)始運(yùn)動(dòng)時(shí)，關(guān)閉已有定時(shí)器；
- 把運(yùn)動(dòng)和停止分隔開(kāi)(if/else)；
案例: div的移動(dòng)
案例: startMove的封裝(分享到)
案例: 圖片的淡入淡出
● 緩沖運(yùn)動(dòng)
- 逐漸變慢，最后停止(越接近終點(diǎn)速度越小)
- 距離越遠(yuǎn)速度越大
> 速度由距離決定
> 速度 = (目標(biāo)值-當(dāng)前值)/縮放系數(shù)
向上取整: Math.ceil(12.3); // 13
向下取整: Math.floor(7.9); // 7
Math.floor(-2.1) // -3
絕對(duì)值: Math.abs(-5); // 5
window.scroll窗口滾動(dòng)事件
// 兼容問(wèn)題 (獲取滾動(dòng)條位置 )
var top = document.documentElement.scrollTop || document.body.scrollTop;
案例: 始終在窗口中間位置顯示—分享到
案例: 分享到閃爍問(wèn)題(緩沖運(yùn)動(dòng)的具體使用)
案例: 勻速運(yùn)動(dòng)
● 運(yùn)動(dòng)終止條件
緩沖運(yùn)動(dòng): 兩點(diǎn)重合
勻速運(yùn)動(dòng): 距離足夠近
二、多物體運(yùn)動(dòng)框架
多個(gè)物體同時(shí)運(yùn)動(dòng):
- 將定時(shí)器作為物體的屬性
- 參數(shù)的傳遞: 物體、目標(biāo)值
> 所有東西都不能公用(不然肯定會(huì)出問(wèn)題)
> 屬性與運(yùn)動(dòng)對(duì)象綁定: 速度、其他屬性(例如透明度等)
案例: 物體變寬(緩沖)
案例: 多物體變寬
三、任意值運(yùn)動(dòng)框架
offsetWidth(offset..都有這類(lèi)問(wèn)題):
offsetWidth: div自身寬度width + div的padding + div的border
#div1{
width: 100px;
height: 100px;
background: paleturquoise;
/*修改樣式以后，div會(huì)自動(dòng)變寬了*/
border: 1px solid gray;
}
// 原本是自動(dòng)變小的，但加上邊框后，div自動(dòng)變大
oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
分析: oDiv.offsetWidth是102px，當(dāng)每次定時(shí)器觸發(fā)的時(shí)候，oDiv.offsetWidth都會(huì)減去1，那么減去的就1px值，但下次過(guò)后不要忘記還有邊框border: 2px值；
width: 100px offSetWidth: 102px width: 102px - 1px = 101px;
width: 101px offSetWidth: 103px width: 103px - 1px = 102px;
width: 102px offSetWidth: 104px width: 104px - 1px = 103px;
….
備注: 之后項(xiàng)目時(shí)，最好不要使用offsetWidth/offsetHeight..，因?yàn)檫@個(gè)非常容易出問(wèn)題，學(xué)習(xí)階段可以使用，因?yàn)楹?jiǎn)單。更多對(duì)于內(nèi)聯(lián)樣式也不方便操作，那么即可以通過(guò)以下方式獲取到對(duì)應(yīng)樣式，然后進(jìn)行操作;
// 不建議使用的
//oDiv.style.width = oDiv.offsetWidth - 1 + 'px';
// 內(nèi)聯(lián)樣式，操作不方便
// oDiv.style.width = parseInt(oDiv.style.width) - 1 + 'px';
// 注意: 屬性是字符串來(lái)的 — 推薦使用方式
oDiv.style.width = parseInt( getStyle(oDiv, 'width') ) - 1 + 'px';
// 獲取屬性名對(duì)應(yīng)的屬性值
function getStyle(obj, att){
return window.getComputedStyle ? getComputedStyle(obj)[att] : obj.currentStyle[att];
}
案例: 任意值變化封裝
案例: 任意值變化(透明度處理)
案例: 圖片詳情展示
案例: 仿flash圖片輪播
四、鏈?zhǔn)竭\(yùn)動(dòng)框架
● 回調(diào)函數(shù)
> 運(yùn)動(dòng)停止時(shí)，執(zhí)行函數(shù)；
> 運(yùn)動(dòng)停止時(shí)，開(kāi)始下一次運(yùn)動(dòng);
● JSON數(shù)據(jù)格式
● JSON是一種輕量級(jí)的數(shù)據(jù)交換格式，JSON采用完全獨(dú)立于語(yǔ)言的文本格式，這些特性使得JSON成為理想的數(shù)據(jù)交換語(yǔ)言。易于閱讀和編寫(xiě)，同時(shí)也易于機(jī)器解析和生成。
JSON的構(gòu)建結(jié)構(gòu): “關(guān)鍵字/值”這種鍵值對(duì)的結(jié)合;
var json = {
name: 'liming',
sex: '男',
price: [98, 80, 100]
};
// 訪(fǎng)問(wèn)方式
alert(json.name); // 通過(guò)點(diǎn)語(yǔ)法訪(fǎng)問(wèn)
alert(json['sex']); // 通過(guò)方括號(hào)
// json的遍歷
// 遍歷的key就是JSON的關(guān)鍵字
for(key in json){
// 取出關(guān)鍵字對(duì)應(yīng)的值
alert(json[key]);
}
案例: setStyle封裝
五、完美運(yùn)動(dòng)框架
多個(gè)值同時(shí)變化
> setStyle同時(shí)設(shè)置多個(gè)屬性
- 參數(shù)傳遞
json的使用
forin遍歷屬性
> 運(yùn)用到運(yùn)動(dòng)框架
> 檢測(cè)運(yùn)動(dòng)停止
- 標(biāo)志變量
六、運(yùn)動(dòng)框架應(yīng)用
案例: 循環(huán)滾動(dòng)(無(wú)縫銜接)
七、碰撞運(yùn)動(dòng)
● 碰撞運(yùn)動(dòng)
- 撞到目標(biāo)點(diǎn)，速度反轉(zhuǎn)
- 無(wú)重力的懸浮div
速度反轉(zhuǎn)
滾動(dòng)條閃爍問(wèn)題
越界后直接拉回來(lái)
● 加入重力
- 反轉(zhuǎn)速度的同時(shí)，減小速度
- 縱向碰撞，橫向速度也減小
- 橫向速度小數(shù)問(wèn)題(負(fù)數(shù))
作者：西門(mén)奄
鏈接：http://www.itdecent.cn/u/77035eb804c3
來(lái)源：簡(jiǎn)書(shū)
簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
