JS成长路——关于运动框架（待改）

 

//跨浏览器获取元素样式

function getStyle(obj,name){

if(obj.currentStyle){ //IE

return obj.currentStyle[name];

}else{ //W3C

return getComputedStyle(obj,false)[name];

}

};

//运动框架原生JS

// obj 为元素  ； json 存储元素的属性及属性值 ； complete 为json形式存储time ：时间、ease ：运动形式 linear匀速 ease_in 加速 ease-out 减速、fn :回调函数

function move(obj,json,complete){

clearInterval(obj.timer);

complete = complete ||{};

complete.time = complete.time || 500 ; //设置默认时间为500ms

complete.ease = complete.ease || 'linear' ; //设置默认运动形式为匀速运动

var start = {}; //用来存储元素起始点信息

var dis = {};//用来存储总距离

for(var name in json){  

star[name] = parseFloat(getStyle(obj,name));//通过遍历json中属性，获取元素属性样式，并赋给star

dis[name] = json[name] - start[name];//得到元素属性运动的‘路程’ 并赋给dis

}

var count = Math.floor(complete.time/30);//计算运动的总次数

var n = 0 ;//记录运动的次数 ,初始化

obj.timer = setInterval(function(){

n++;

for(var name in json){ 

switch (complete.ease){ //判断用户所选运动方式：匀速linear ,加速 ease-in 减速ease-out

case 'linear':

var a =n / count ; //计算当前运动次数与运动总次数的比例 —— 

var cur = start[name] + dis[name] * a; //  计算当前经过运动n次后的路程

break;

case 'ease-in':

var a = n / count;

var cur = start[name] + dis[name] * a * a * a;

break;

case 'ease-out':

var a = 1 - n / count;

var cur = start[name] + dis[name] * (1 - a * a * a);

break;

}

if(name == 'opacity'){ // 判断是否是更改元素背景透明度属性 

obj.style.opacity = cur; // 高版本浏览器

obj.style.filter = 'alpha(opacity:' + cur * 100 + ')';

} else {

obj.style[name] = cur + 'px';

}

}

if (n == count){  // 判断元素的属性是否已经达到指定属性值

clearInterval(obj.timer); // 关闭定时器

complete.fn && complete.fn(); // 判断是否存在回调函数，若存在回调函数， 则运行回调函数。、

　　　　}

},30);

}

新生上路 ， 不喜勿喷。谢谢！