不废话上代码
//获取非行间样式
function getStyle(obj,name) {
return (obj.currentStyle || getComputedStyle(obj,false))[name];
}
// 运动MOVE开始
function (obj,json,options) {
// 1、整理options
options = options || {};
options.duration = options.duration || 500;
options.easing = options.easing || 'ease-out';
// 2、清理obj的定时器
clearInterval(obj.timer);
// 3、整理 start & dis & count
var start = {};
var dis = {};
for (var name in json) {
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[name];
}
var count = Math.round(options.duration/30);
var n = 0;
// 4、做事开定时器
obj.timer = setInterval(function(){
// n++
n++;
for (var name in json) {
//判断运动种类
switch (options.easing){
case 'linear' :
var a = n / count;
var cur = start[name] + dis[name]*a;
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;
}
//判断name是否是opacity,是直接赋cur
if (name == 'opacity') {
obj.style.opacity = cur;
obj.style.fliter = 'alpha(opacity:'+cur*100+')';
} else {
obj.style[name] = cur + 'px';
}
}
//判断什么是定时器停止并回调函数
if (n == count) {
clearInterval(obj.timer);
options.complete && options.complete();
}
},30);
}
网友评论