一泳猬、Math常用函數(shù)
-
**Math.ceil() 向上取整 天花板 **
Math.ceil(1.11) 結(jié)果 是 2
Math.ceil(1.99) 結(jié)果 是 2
Math.ceil(-1.5) 結(jié)果 是 -1
-
**Math.floor() 向下取整 地板 **
Math.floor(1.11) 結(jié)果 是 1
Math.floor(1.99) 結(jié)果 是 1
Math.floor(-1.2) 結(jié)果 是 -2
-
Math.round() 四舍五入
Math.round(1.11) 結(jié)果 是 1
Math.round(1.99) 結(jié)果 是 2
Math.round(-1.2) 結(jié)果 是 -2
二念秧、緩動(dòng)動(dòng)畫原理
緩動(dòng)動(dòng)畫的原理:** 盒子本身的位置 + 步長(zhǎng) (不斷變化的奴璃，由大變小)**
步長(zhǎng)：**begin = begin + (end - begin) / 緩動(dòng)系數(shù) **
-
基本的緩動(dòng)動(dòng)畫函數(shù)：
// 緩動(dòng)動(dòng)畫 // 誰 目標(biāo) function buffer(obj, target) { // 1. 清除定時(shí)器 clearInterval(obj.timer); // 2. 設(shè)置定時(shí)器 obj.timer = setInterval(function () { // 2.1 求出步長(zhǎng) var speed = (target - obj.offsetLeft) / 20; console.log(speed); speed = speed > 0 ? Math.ceil(speed): Math.floor(speed); console.log(speed); // 2.2 設(shè)置動(dòng)畫 obj.style.left = obj.offsetLeft + speed + 'px'; obj.innerHTML = obj.offsetLeft; // 2.3 清除定時(shí)器 if(obj.offsetLeft == target){ clearInterval(obj.timer); } }, 20); }
2.1 常見的 js訪問 CSS 屬性
在開發(fā)中己英，訪問得到css 屬性姨夹，比較常用的有兩種：
-
點(diǎn)語法
box.style.width甜癞，box.style.height夕晓，box.style.top，box.style.left
得到帶有單位的屬性值悠咱，比如：200px蒸辆；
但是，點(diǎn)語法存在一個(gè)很致命的問題析既，跟在style后面的屬性不能由外面?zhèn)魅?/p>var h = 'height'; box.style.h = 300 + 'px';
-
-
- 下標(biāo)語法
** 利用 [] 訪問屬性 元素.style[“屬性”]; **
這種語法的好處就是可以動(dòng)態(tài)的傳遞參數(shù)作為屬性var h = 'height'; box.style[h] = 300 + 'px';
2.2 JS獲取CSS的樣式
在開發(fā)中吁朦，我們想要獲得css 的樣式，通常采用：box.style.top 渡贾，box.style.backgorundColor等逗宜， 但這種方式只能得到 行內(nèi)樣式，而平常用的最多的是頁內(nèi)樣式或者外部樣式， 如何解決纺讲。
-
在IE和Opera瀏覽器
**obj.currentStyle **
-
其他W3C標(biāo)準(zhǔn)瀏覽器
**window.getComputedStyle("元素", "偽類") ** （ 注意：兩個(gè)選項(xiàng)是必須的擂仍， 沒有偽類 用 **null **替代 ）
-
- 兼容寫法
function getStyleAttr(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; } }
- 兼容寫法
2.3 js對(duì)象遍歷
-
for in 關(guān)鍵字
for ( 變量 in 對(duì)象) { 執(zhí)行語句; }
for(var k in json){ console.log(k); // key console.log(json[k]); // value }
2.4 回調(diào)函數(shù)
在開發(fā)中，有很多操作是鏈?zhǔn)降陌旧酰乱粋€(gè)操作接著上一個(gè)操作執(zhí)行逢渔，如何實(shí)現(xiàn)** 回調(diào)函數(shù)。**
回調(diào)函數(shù)什么時(shí)候調(diào)用?
--> 動(dòng)畫結(jié)束的時(shí)候調(diào)用
--> 動(dòng)畫什么時(shí)候結(jié)束?
---> 定時(shí)器被清除的時(shí)候
--> 定時(shí)器被清除時(shí)調(diào)用回調(diào)函數(shù)
2.5 完整版緩動(dòng)動(dòng)畫
/*
* 緩動(dòng)動(dòng)畫
* obj: 要做動(dòng)畫的元素
* json: 要做動(dòng)畫的屬性鍵值對(duì)
* fn: 回調(diào)函數(shù)
*/
function Buffer(obj, json, fn) {
// 1. 清除定時(shí)器
clearInterval(obj.timer);
// 2. 設(shè)置定時(shí)器
obj.timer = setInterval(function () {
var flag = true, begin, target;
// 2.1 遍歷json
for(var k in json){
// 2.1.1 獲取做動(dòng)畫屬性的初始值
if('opacity' == k){ // 透明度
begin = parseInt(parseFloat(getCssStyleAttr(obj, k)) *100) || 0;
target = parseInt(parseFloat(json[k])*100);
}else { // 其他動(dòng)畫
begin = parseInt(getCssStyleAttr(obj, k));
target = parseInt(json[k]);
}
// 2.1.2 獲取動(dòng)畫的步長(zhǎng)
var speed = (target - begin) / 20;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
// 2.1.3 設(shè)置緩動(dòng)動(dòng)畫
if('opacity' == k ){ // 透明度
obj.style.opacity = (begin + speed) / 100;
obj.style.filter = 'alpha(opacity='+ (begin + speed) +')';
}else if('zIndex' == k){
obj.style.zIndex = json[k];
}else { // 其他情況
obj.style[k] = begin + speed + 'px';
}
// 2.1.4 判斷是否清除定時(shí)器
flag = (begin != target) ? false : true;
}
// 2.2 清除定時(shí)器
if(flag){
clearInterval(obj.timer);
//判斷
if(fn){
fn(); // 執(zhí)行函數(shù)
}
}
}, 20);
}
function $(id) {
return document.getElementById(id);
}
function getCssStyleAttr(obj, attr) {
if(obj.currentStyle){
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
}
